Flutter: How do I show an AlertBox as soon as my network image is loaded and only for once after app opens

Viewed 37

I am trying to show an image on my screen, in an AlertBox. I am fetching the image from the network and then displaying it in the UI. I have a variable announcementImage, which is fetching data from API and stores the url in the variable. I want, as soon as I receive the image URL and as soon as the image loads, my AlertBox should appear. And this should happen only once, i.e. after the app starts. It should not appear again after I come back from another page.

Here is the code of initState -

@override
  void initState() {
    super.initState();
    print("\n \n \n \n Started initialize \n \n");
    Future.delayed(Duration.zero).then((value) {
      showDialog(
        context: context,
        builder: (BuildContext buildContext) {
          const double iconSize = 27;
          return LayoutBuilder(
            builder: (context, constraints) => AlertDialog(
              backgroundColor: Colors.transparent,
              elevation: 0,
              contentPadding: EdgeInsets.zero,
              content: SizedBox(
                width: constraints.maxWidth * .75,
                height: constraints.maxHeight * .71,
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: ValueListenableBuilder(
                        valueListenable: announcementImage,
                        builder: (BuildContext context, String? url, Widget? child) {
                          return Image.network(
                            url??"",
                            width: constraints.maxWidth * .72 - iconSize,
                            height: constraints.maxHeight * .72 - iconSize,
                          );
                        },
                      ),
                    ),

                    Align(
                      alignment: Alignment.topRight,
                      child: GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(7.0),
                            child: const Icon(
                              Icons.close,
                              size: iconSize,
                              color: colorPrimary,
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
      );
    });
  }
0 Answers
Related