Alert Dialog still open even after I left the screen-CodePudding

In the Profile Page I have a function openGallery and it uses ImagePicker to choose how users want to select images or videos whether by camera or gallery. So in this function I am returning an AlertDialog to show the options of taking pictures and videos by camera or choosing from the gallery. The function looks something like this :

void openGallery() {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        contentPadding: const EdgeInsets.all(10.0),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.zero,
        ),
        content: SizedBox(
          height: 260.0,
          width: 360.0,
          child: Column(
            children: [
              const SizedBox(
                height: 20.0,
              ),
              ListTile(
                onTap: () async {
                  final image = await getMedia(ImageSource.gallery);

                  setState(() {
                    files = image;
                  });
                },
                title: Text(
                  'Choose a photo from gallery',
                  style: GoogleFonts.mada(
                    fontSize: 18.0,
                    fontWeight: FontWeight.w300,
                    letterSpacing: 1.1,
                  ),
                ),
                trailing: const IconButton(
                  onPressed: null,
                  icon: Icon(
                    MdiIcons.memory,
                  ),
                ),
              ),
              ListTile(
                onTap: () async {
                  final image = await getMedia(ImageSource.camera);

                  setState(() {
                    files = image;
                  });
                },
                title: Text(
                  'Capture a photo',
                  style: GoogleFonts.mada(
                    fontSize: 18.0,
                    fontWeight: FontWeight.w300,
                    letterSpacing: 1.1,
                  ),
                ),
                trailing: const IconButton(
                  onPressed: null,
                  icon: Icon(
                    Icons.camera,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

When I click on the add icon this openGallery function is called and that is what I want. After choosing a file instead of navigation to a screen where a user can add a caption it does both. After choosing a file the dialog is still open even in a different screen. Please help me on how I can stop this from happening after choosing an image. All I want is for it to go to the screen where the user can add a caption. Thank you

CodePudding user response：

Before the code that goes to another screen, you need to add the following code:

Navigator.of(context).pop();

CodePudding user response：

In onTap at the end Dont forget to use Navigator.of(context).pop() to close the dialog

Navigator.of(context).pop()

See this example

CodePudding user response：

use pop() to close dialog;

onTap: () async {
   Navigator.of(context).pop();
   final image = await getMedia(ImageSource.gallery);
   setState(() {
      files = image;
   });
 },

CodePudding user response：

final image = await getMedia(ImageSource.gallery);
setState(() {
files = image;
Navigator.pop(context);//to close dialog after chose an image
Navigator.push(context, route);//for going to your rout
});