Prevent dialog from closing on outside touch in Flutter

Question

In Flutter, I write a simple dialog for the loader during async task. When I touch outside dialog dismissed, How can I stop this behaviour?

Code

  showDialog(
    context: context,
    builder: (_) => new Dialog(
          child: new Container(
            alignment: FractionalOffset.center,
            height: 80.0,
            padding: const EdgeInsets.all(20.0),
            child: new Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                new CircularProgressIndicator(),
                new Padding(
                  padding: new EdgeInsets.only(left: 10.0),
                  child: new Text("Loading"),
                ),
              ],
            ),
          ),
        ));

Duplicate of https://stackoverflow.com/questions/50635395/how-to-set-alertdialog-to-dont-close-clicking-outside-in-flutter/50635504#50635504 Answer already available there — Vinoth Kumar, Jun 02 '18 at 00:14

Rémi Rousselet · Accepted Answer · 2020-07-21T09:07:58.673

294

There's a property called barrierDismissible that you can pass to showDialog ; which makes dialogs dismissible or not on external click

showDialog(
  barrierDismissible: false,
  builder: ...
)

edited Jul 21 '20 at 09:07

answered Jun 01 '18 at 22:19

Rémi Rousselet

256,336
79
519
432

3

how to handle `barrierDismissible`.. like when click outside adding different activity – Apr 11 '19 at 07:03
12

In Android you are still able to close the dialog by pressing the BACK button. Is there a way to prevent this as well? – Alex Semeniuk Sep 11 '19 at 12:08
8

Alex you can enclose the dialog builder widget with a WillPopScope. Check this answer: https://stackoverflow.com/questions/45916658/how-to-deactivate-or-override-the-android-back-button-in-flutter – Dpedrinha Sep 29 '19 at 18:59
If you are using `showModalBottomSheet` then you need to turn the `isDismissible: false` – Maruf Hassan Mar 31 '21 at 15:53
`showCupertinoDialog` also has this property. – Pranav Kasetti Jun 16 '21 at 15:52

Sachin Tanpure · Answer 2 · 2021-03-22T11:45:12.553

54

If you want to prevent dialog close when back button pressed then refer below code. You have to wrap your AlertDialog in WillPopScope widget and make onWillPop property value with function which return Future.value(false).

showDialog(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return WillPopScope(
            onWillPop: () => Future.value(false),
            child:AlertDialog(
            title: new Text("Alert Title"),
            content: new SingleChildScrollView(
              child: Container(),),
            actions: <Widget>[
              new FlatButton(
                child: new Text("Close"),
                onPressed: () {
                },
              ),
            ],
          )
        )
      },
    );

edited Mar 22 '21 at 11:45

answered Aug 28 '20 at 11:34

Sachin Tanpure

1,068
11
12

7

It is impossible to use `onWillPop: (){}` now. The appropriate variant is `onWillPop: () => Future.value(false)` – Valentina Konyukhova Nov 05 '20 at 20:34
1

Or `onWillPop: () async => false,` – Defuera Feb 23 '21 at 12:09
@ValentinaKonyukhova Yes you are right. I have updated my answer. Thanks – Sachin Tanpure Mar 22 '21 at 11:47
thanks this solution to prevent all dismiss method – wanz Jul 10 '23 at 10:55

score 18 · Answer 3 · answered May 05 '21 at 20:39

just Add this Line

barrierDismissible: false,

like as

       showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(
              "Classes",
              style: TextStyle(
                  fontSize: 24, color: Colors.black, fontFamily: 'intel'),
            ),
            content: setupAlertDialoadClassList(
                context, listClasses, Icons.class__outlined, 0),
          );
        });

score 5 · Answer 4 · answered Mar 01 '22 at 11:10

5

barrierDismissible: false,

Use this one as I described below. showDialog( barrierDismissible: false, builder // code //

answered Mar 01 '22 at 11:10

Laraib. Sheikh

99
1
5

score 5 · Answer 5 · answered Jul 03 '22 at 09:15

This will disable device navigation

showDialog(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return WillPopScope(
            onWillPop: () async => false,
            child:AlertDialog(
            title: new Text("Alert Title"),
            content: new SingleChildScrollView(
              child: Container(),),
            actions: <Widget>[
              new FlatButton(
                child: new Text("Close"),
                onPressed: () {
                },
              ),
            ],
          )
        )
      },
    );

Exactly what I needed because while `barrierDismissible: false,` prevented closing by clicking outside the dialog, you could still close it by hitting the back button. — Ojonugwa Jude Ochalifu, May 28 '23 at 19:21

score 2 · Answer 6 · answered Jan 17 '22 at 06:31

2

Always use top flutter packages like get

Get.generalDialog(pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation,) {
      return SimpleDialog(
        ...
      );
    }, barrierDismissible: false /* its default value */);

answered Jan 17 '22 at 06:31

mostapha

189
1
7

Thanks. This is what I need with getX package – ANDYNVT Jan 24 '22 at 01:33
Bad advice. You absolutely do not need to use GetX. Also, just avoid using GetX, in general. – Muhammad Vaid Jul 03 '23 at 21:14

score 1 · Answer 7 · edited Jun 18 '23 at 07:56

1

Phone navigation bar action disabled and disable outer touch in AlertDialog

showDialog(
  context: context,
  barrierDismissible: false,    // <-- Set this to false.
  builder: (_) => WillPopScope(
    onWillPop: () async => false, // <-- Prevents dialog dismiss on press of back button.
    child: AlertDialog(),
  ),
);

edited Jun 18 '23 at 07:56

Codemaker2015

12,190
6
97
81

answered Jun 17 '23 at 07:40

Karthikeyan Veeramani

11
2

score 0 · Answer 8 · answered Oct 05 '22 at 18:07

If you ar not using a showDialog, otherwise you'r using GestureDetectore, there's a easy way i just did, Just put a GestureDetector inside another one, then set the onTap action if that's your case on both GestureDetector's, with the diference that in one you are gonna put an action, an in the other one you can just leave it empty, just like this.

GestureDetector(
    onTap: () { //The Gesture you dont want to afect the rest
      Navigator.pop(context);
    },
    child: Container(
      color: Colors.transparent,
      child:GestureDetector(
            onTap: () {}, //This way is not going to afect the inside widget
            child: Container() //your widget
            )
          )
        )

Prevent dialog from closing on outside touch in Flutter

8 Answers8

Linked