Calling setState doesn't updateshowDialog content

Question

I have a custom popup built, and an image is supposed to change whenever one of my variables is changed. When I call the setState method, the content in my showDialog doesn't change.

What am I doing wrong, or is there a better approach? Trying to change the state so the image can be changed in the showDialog.

Here's my code:

class LocationManagerPage extends StatefulWidget {
  const LocationManagerPage({Key? key}) : super(key: key);

  @override
  State<LocationManagerPage> createState() => _LocationManagerPageState();
}

class _LocationManagerPageState extends State<LocationManagerPage> {
  String downloadURL = "";

  Future _uploadFile(String path) async {
    // Logic that gets the download url to an image...
    // When the download url is found, calling setState method
    setState(() {
      downloadURL = fileUrl;
    });
  }

  showLocationPopup() {
    return showDialog(
      context: context,
      builder: (context) {
        return Center(
          child: Material(
            child: Container(
              width: 427,
              height: 676,
              decoration: BoxDecoration(...),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    // Popup UI Widgets,
                    Center(
                      child: Container(
                        height: 150,
                        width: 150,
                        decoration: BoxDecoration(),
                        child: ClipRRect(
                          child: Image.network(
                            image,
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.circular(20),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    Center(
                      child: MouseRegion(
                        cursor: SystemMouseCursors.click,
                        child: GestureDetector(
                          onTap: () async {
                            String? imageUrl = await urlFromWebImage();
                            print(imageUrl);
                            setState(() {
                              downloadURL = imageUrl!;
                            });
                          },
                          child: Button(
                            name: imageName,
                          ),
                        ),
                      ),
                    ),
                    // The rest of the popup UI
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      .... // Not Important
    );
  }
}

You don't show enough code, I think, for a diagnosis. In particular, you don't show where `image` is created - which is the thing that's actually needing to change - 'cos that's displayed as part of `Image.network...`. Just imagining what your code should do, when you do a `setState` with the new URL, perhaps your `setState` should also include setting the `image` variable. — Jon Mountjoy, Jun 09 '22 at 15:29

score 0 · Answer 1 · answered Jun 09 '22 at 15:36

0

To update dialog ui you need to use StatefulBuilder widget on showDialog's builder and use StatefulBuilder's setState.

showDialog(
    context: context,
    builder: (context) => StatefulBuilder(
          builder: (context, setState) => AlertDialog(

answered Jun 09 '22 at 15:36

Md. Yeasin Sheikh

54,221
7
29
56

score 0 · Answer 2 · answered Jun 09 '22 at 15:36

you can use the following approach

first initialize download url like this

        ValueNotifier<String> downloadUrl = ValueNotifier("");




        ValueListenableBuilder(
            valueListenable: downloadUrl,
            builder: (context, value, Widget? c) {
              return Container(
                  height: 150,
                  width: 150,
                  decoration: BoxDecoration(),
                  child: ClipRRect(
                    child: Image.network(
                      downloadUrl.value, // here put download url it will auto update
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(20),
                  ));
            });

and without using setstate put value in download url it will auto update ui

 downloadUrl.value = "" //your image url

or you can use StateFulBuilder

setstate rebuild your whole widget but upper approach only build image widget

Calling setState doesn't updateshowDialog content

2 Answers2