How to dismiss an AlertDialog on a FlatButton click?

Question

I have the following AlertDialog.

showDialog(
            context: context,
            child: new AlertDialog(
              title: const Text("Location disabled"),
              content: const Text(
                  """
Location is disabled on this device. Please enable it and try again.
                  """),
              actions: [
                new FlatButton(
                  child: const Text("Ok"),
                  onPressed: _dismissDialog,
                ),
              ],
            ),
        );

How can I make _dismissDialog() dismiss said AlertDialog?

Collin Jackson · Accepted Answer · 2017-05-24T16:33:32.833

236

Navigator.pop() should do the trick. You can also use that to return the result of the dialog (if it presented the user with choices)

edited May 24 '17 at 16:33

answered May 24 '17 at 13:49

Collin Jackson

110,240
31
221
152

16

Thank you, that worked. Calling Navigator.pop() closes out the dialog as expected. My current onPressed is as follows: `onPressed: () => Navigator.pop(context),` – Gustash May 24 '17 at 13:52
Worked for me as well! – Daniel Dec 12 '20 at 12:21
That's a fine solution, but there's a problem with that if AlertDialog is due to be closed automatically in 5 seconds, then if user taps elsewhere around dialog, thus closing dialog, after 5 seconds, `Navigator.pop(context)` redirects user back to the previous screen. Is there a solution that would specifically close specific AlertDialog, and not redirect user back if there is no AlertDialog? – Dalibor Oct 20 '22 at 21:05

score 164 · Answer 2 · edited Jul 02 '18 at 18:55

164

Navigator.of(context, rootNavigator: true).pop('dialog')

worked with me.

edited Jul 02 '18 at 18:55

Roshana Pitigala

8,437
8
49
80

answered Jul 02 '18 at 18:24

AbdulMomen عبدالمؤمن

19,419
17
57
65

13

Accepted answer was causing my whole page to disappear, this is proper answer to hide a dialog – user969068 Feb 17 '19 at 11:12
11

it is a better approach to close the dialog, I was trying above solution but it was poping my other view. – Farhana Naaz Ansari Mar 01 '19 at 06:29
3

Accepted answer was causing my page to disappear too, this is the proper answer to hide a dialog. – Ben Jan 09 '20 at 07:03
1

The answer still causes the entire view to pop. – karrar kazuya Apr 24 '20 at 14:37
what is rootNavigator ? – K Pradeep Kumar Reddy May 22 '20 at 12:25
Thank you very much for this answer. Fixes my progress dialog dismiss issue too. – Ali Oct 17 '22 at 22:00

score 44 · Answer 3 · answered Sep 22 '18 at 16:49

44

Navigator.pop(_)

worked for me, but the Flutter Team's gallery contains an example using:

Navigator.of(context, rootNavigator: true).pop()

which also works, and I am tempted to follow their lead.

answered Sep 22 '18 at 16:49

Bryon Nicoson

903
11
11

1

I calling a Custom AlertDialog from another .dart file and using Navigator.of(context, rootNavigator: true).pop(); worked thanks. – djalmafreestyler Apr 18 '20 at 17:08
1

I had always used the first version... but just ran into an example where the second one did, but the first removed the screen below it. – William Terrill Jul 24 '20 at 03:37

CopsOnRoad · Answer 4 · 2020-05-22T12:26:50.390

30

If you don't want to return any result, use either of them:

Navigator.of(context).pop();
Navigator.pop(context);

But if you do want to return some result, see this

Example:

showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: Text('Wanna Exit?'),
        actions: [
          FlatButton(
            onPressed: () => Navigator.pop(context, false), // passing false
            child: Text('No'),
          ),
          FlatButton(
            onPressed: () => Navigator.pop(context, true), // passing true
            child: Text('Yes'),
          ),
        ],
      );
    }).then((exit) {
  if (exit == null) return;

  if (exit) {
    // user pressed Yes button
  } else {
    // user pressed No button
  }
});

edited May 22 '20 at 12:26

answered Oct 29 '18 at 11:36

CopsOnRoad

237,138
77
654
440

What is the difference between these two lines of code ?? – K Pradeep Kumar Reddy May 22 '20 at 12:24
1

@user3410835 No difference, actually `Navigator.pop()` calls the the first line. – CopsOnRoad May 22 '20 at 12:24
How to make AlertDialog dismissable = false ? So that Dialog is not dismissed when i click on screen outside the dialog. – K Pradeep Kumar Reddy May 22 '20 at 13:25
@user3410835 there is a property named `barrierDismissible` for the showDialog() and you can set it to false or true. – Prabowo Murti Jun 04 '20 at 04:06

Vicky Salunkhe · Answer 5 · 2021-10-13T04:57:30.527

21

Generally Navigator.pop(context); works.

But If the application has multiple Navigator objects and dialogBox doesn't close, then try this

Navigator.of(context, rootNavigator: true).pop();

If you want to pass the result call, try

Navigator.pop(context,result);

OR

Navigator.of(context, rootNavigator: true).pop(result);

edited Oct 13 '21 at 04:57

answered Dec 07 '20 at 13:24

Vicky Salunkhe

9,869
6
42
59

2

This is the best answer – vishalknishad Oct 13 '21 at 02:40

score 9 · Answer 6 · edited Jul 28 '21 at 11:37

Navigator.of(dialogContext).pop() otherwise you can close page if you navigated from Master to Detail page

                showDialog(
                  context: context,
                  builder: (dialogContext) {
                    return Dialog(
                      child: Column(
                        children: [
                          Text("Content"),
                          RaisedButton(
                            onPressed: () => Navigator.of(dialogContext).pop(),
                            child: Text("Close"),
                          )
                        ],
                      ),
                    );
                  },
                );

Jitesh Mohite · Answer 7 · 2020-05-22T15:48:35.917

Example of dismissing alert dialog on flat button click

RaisedButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (context) => AlertDialog(
                    title: Text('Are you sure?'),
                    content: Text('Do you want to remove item?'),
                    actions: <Widget>[
                      FlatButton(
                          onPressed: () => Navigator.of(context).pop(false),//  We can return any object from here
                           child: Text('NO')),
                      FlatButton(
                          onPressed: () => Navigator.of(context).pop(true), //  We can return any object from here
                          child: Text('YES'))
                    ],
                  )).then((value) =>
              print('Selected Alert Option: ' + value.toString()));
        },
        child: Text('Show Alert Dialog'),
      ),

Above code have two unique things which is used to provide callback result of dialog

Navigator.of(context).pop(false) -- return false value when we pressed NO Navigator.of(context).pop(true) -- return true value when we pressed YES

Based on these return value, we can perform some operation outside of it or maintain the dialog status value

what will pop(false) do ? and what will pop(true) do ? Anyways in both the cases we want the AlertDialog to be dismissed. — K Pradeep Kumar Reddy, May 22 '20 at 12:23

score 4 · Answer 8 · answered Jul 04 '19 at 07:35

This works Prefectly

      RaisedButton(
                child: Text(
                  "Cancel",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                onPressed: () => Navigator.pop(context),
              ),

score 4 · Answer 9 · edited Nov 12 '21 at 03:18

4

This worked for me Navigator.of(context, rootNavigator: true).pop('dialog').

Navigator.pop() just closes the current page/screen.

edited Nov 12 '21 at 03:18

TuGordoBello

4,350
9
52
78

answered Oct 22 '20 at 14:27

Prince Kelvin

106
1
4

score 2 · Answer 10 · answered Aug 06 '20 at 09:49

Creating a separate context for Alert Dialog would help.

showDialog(
  context: context,
  builder: (alertContext) => AlertDialog(
    title: const Text("Location disabled"),
    content: const Text(
        """Location is disabled on this device. Please enable it and try again."""),
    actions: [
      new FlatButton(
        child: const Text("Ok"),
        onPressed: () => Navigator.pop(alertContext),
      ),
    ],
  ),
);

score 2 · Answer 11 · answered Aug 23 '20 at 15:16

2

Please use following for code to close dialog

RaisedButton(
     onPressed: () { Navigator.of(context).pop();},
     child: Text("Close",style: TextStyle(color: Colors.white), ),
                color: Colors.black,
           )

answered Aug 23 '20 at 15:16

Krishnamoorthy Acharya

3,846
36
29

score 1 · Answer 12 · answered Apr 26 '20 at 12:43

Use Navigator.pop(context);

Example

showDialog(
            context: context,
            child: new AlertDialog(
              title: const Text("Location disabled"),
              content: const Text(
                  """
Location is disabled on this device. Please enable it and try again.
                  """),
              actions: [
                new FlatButton(
                  child: const Text("Ok"),
                  onPressed: () {
                      Navigator.pop(context);
                    },
                ),
              ],
            ),
        );

score 1 · Answer 13 · answered Jul 29 '20 at 19:02

This answer works if you want to pop the dialog and navigate to another view. This part 'current_user_location' is the string the router need to know which view to navigate to.

FlatButton(
           child: Text('NO'),
           onPressed: () {
             Navigator.popAndPushNamed(context, 'current_user_location');
              },
           ),

lava · Answer 14 · 2021-09-20T12:39:43.727

This enough to dismisss dialog add inside Any callback like
onpressed,ontap

Navigator.of(context).pop();

    AlertDialog(
          title: Center(child: Text("$title")),
          insetPadding: EdgeInsets.zero,
          titlePadding: EdgeInsets.only(top: 14.0, bottom: 4),
          content: Container(
            height: 50,
            child: TextFormField(
              controller: find_controller,
              decoration: InputDecoration(
                suffixIcon: context.watch<MediaProvider>().isChangeDialog
                    ? IconButton(
                        onPressed: () {
                          clearController(find_controller);
                        },
                        icon: Icon(Icons.clear))
                    : null,
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.deepPurpleAccent)),
                hintText: 'Id',
              ),
              onChanged: (val) {
                if (val.isNotEmpty)
                  context.read<MediaProvider>().isChangeDialog = true;
                else
                  context.read<MediaProvider>().isChangeDialog = false;
              },
            ),
          ),
          actions: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: OutlinedButton(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Align(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 12.0),
                              child: Icon(Icons.clear),
                            ),
                          ),
                          Text("Cancel")
                        ],
                      ),
                      onPressed: () {
                        context.read<MediaProvider>().isChangeDialog = false;
//========================this enough to dismisss dialog
                        Navigator.of(context).pop();
                      }),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: ElevatedButton(
                      onPressed: context.watch<MediaProvider>().isChangeDialog
                          ? () {
                              context.read<MediaProvider>().isChangeDialog = false;
                              okCallback;
                            }
                          : null,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Align(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 12.0),
                              child: Icon(Icons.check),
                            ),
                          ),
                          Text("OK")
                        ],
                      )),
                )
              ],
            ),
          ],
        );

score 1 · Answer 15 · answered Dec 15 '22 at 06:03

1

For Closing Dialog

void cancelClick() {
    Navigator.pop(context);
  }

answered Dec 15 '22 at 06:03

Safal Bhatia

245
2
6

score 0 · Answer 16 · answered Sep 07 '20 at 13:33

0

pass it in the showDialog barrierDismissible : true

answered Sep 07 '20 at 13:33

curiousmind

49
2

score 0 · Answer 17 · answered Apr 29 '22 at 06:37

0

use get package. then Get.back() to close Modal

answered Apr 29 '22 at 06:37

Alexis mouss

29
2

score -4 · Answer 18 · answered Jan 05 '19 at 13:58

The accepted answer states how to dismiss a dialog using the Navigator Class. To dismiss a dialog without using Navigator you can set the onPressed event of the button to the following:

setState((){
  thisAlertDialog = null; 
});

In case the code above is not self-explanatory it is basically setting the Parent AlertDialog of the FlatButton to null, thus dismissing it.

How to dismiss an AlertDialog on a FlatButton click?

18 Answers18

Linked