I have a tool where user can update his own profil pic. User click on a button, then a popup Dialog show.
Button call :
TextButton(
onPressed: () {
changeImage();
setState(() {});
},
child: Text(
'Changer de photo',
style: TextStyle(
fontSize: 9.sp,
fontWeight: FontWeight.w700,
color: Theme.of(context)
.primaryColorLight),
),
ChangeImage function :
Future changeImage() {
return showDialog(
context: context,
builder: (BuildContext context) => Dialog(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
),
padding: const EdgeInsets.all(30),
width: 300.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Change ta photo de profil",
style: Theme.of(context).textTheme.titleMedium,
textAlign: TextAlign.center,
),
SizedBox(
height: 2.h,
),
if (pickedFile != null)
Container(
child: Image.file(
File(pickedFile!.path!),
width: 200,
height: 200,
)),
TextButton(
onPressed: () {
selectFile();
setState(() {});
print(uploadReady);
},
child: const Text(
"Choisir une image",
),
),
SizedBox(
height: 2.h,
),
ElevatedButton(
onPressed: () {
uploadFile();
Navigator.pop(context);
setState(() {});
},
child: const Text(
"Appliquer l'image",
)),
],
),
),
));
}
As you can see, I want to display a preview before the user click to apply image.
But after the user chose his image, the preview doesn’t show. I need to quit the popup dialog, re-click on my initial button (that show the popup) and then the image is displayed.
How can I display dynamically the image’s preview ?
>Solution :
To update dialog ui, you can use StatefulBuilder‘s setState.
Future<void> changeImage() async{
return await showDialog(
context: context,
builder: (BuildContext context) => StatefulBuilder(
builder: (context, setState) => Dialog(
child: Container(
And use case
await changeImage();
setState((){}); // to update main ui