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 ?

CodePudding user response：

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