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 stackoverflow.com/questions/50635395/… Answer already available there — Vinoth Kumar
– Vinoth Kumar, Commented Jun 2, 2018 at 0:14

Rémi Rousselet · Accepted Answer · 2020-07-21 09:07:58Z

325

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, 2020 at 9:07

answered Jun 1, 2018 at 22:19

Rémi Rousselet

280k89 gold badges559 silver badges456 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user11065582 Over a year ago

how to handle barrierDismissible.. like when click outside adding different activity

Alex Semeniuk Over a year ago

In Android you are still able to close the dialog by pressing the BACK button. Is there a way to prevent this as well?

Dpedrinha Over a year ago

Alex you can enclose the dialog builder widget with a WillPopScope. Check this answer: stackoverflow.com/questions/45916658/…

Maruf Hassan Over a year ago

If you are using showModalBottomSheet then you need to turn the isDismissible: false

Pranav Kasetti Over a year ago

showCupertinoDialog also has this property.

|

Sachin Tanpure · Accepted Answer · 2021-03-22 11:45:12Z

60

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, 2021 at 11:45

answered Aug 28, 2020 at 11:34

Sachin Tanpure

1,14611 silver badges12 bronze badges

4 Comments

Valentina Konyukhova Over a year ago

It is impossible to use onWillPop: (){} now. The appropriate variant is onWillPop: () => Future.value(false)

Defuera Over a year ago

Or onWillPop: () async => false,

Sachin Tanpure Over a year ago

@ValentinaKonyukhova Yes you are right. I have updated my answer. Thanks

wanz Over a year ago

thanks this solution to prevent all dismiss method

Sandeep Pareek · Accepted Answer · 2021-05-05 20:39:31Z

19

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),
          );
        });

answered May 5, 2021 at 20:39

Sandeep Pareek

1,81722 silver badges24 bronze badges

Comments

Laraib. Sheikh · Accepted Answer · 2022-03-01 11:10:21Z

7

barrierDismissible: false,

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

answered Mar 1, 2022 at 11:10

Laraib. Sheikh

1191 silver badge5 bronze badges

Comments

Karthikeyan Veeramani · Accepted Answer · 2024-04-02 11:19:05Z

7

Phone navigation bar action disabled

canPop: false

disable outer touch in AlertDialog

barrierDismissible: false

use this code

void alert() {
        showDialog(
          context: context,
          barrierDismissible: false, // <-- Set this to false.
          builder: (_) => PopScope(
            canPop: false, // <-- Prevents dialog dismiss on press of back button.
            child: AlertDialog(),
          ),
        );
      }

edited Apr 2, 2024 at 11:19

answered Jun 17, 2023 at 7:40

Karthikeyan Veeramani

1471 silver badge4 bronze badges

Comments

Pius T.K · Accepted Answer · 2022-07-03 09:15:56Z

5

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: () {
                },
              ),
            ],
          )
        )
      },
    );

answered Jul 3, 2022 at 9:15

Pius T.K

4358 silver badges9 bronze badges

1 Comment

Ojonugwa Jude Ochalifu Over a year ago

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.

Mazhar Niaz · Accepted Answer · 2023-12-11 12:04:13Z

3

Just add this property in your showDialog barrierDismissible: false to prevent it from closing from outside touch.

showDialog(
   barrierDismissible: false,
   ...
)

answered Dec 11, 2023 at 12:04

Mazhar Niaz

1014 bronze badges

Comments

mostapha · Accepted Answer · 2022-01-17 06:31:47Z

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, 2022 at 6:31

mostapha

2312 silver badges7 bronze badges

2 Comments

ANDYNVT Over a year ago

Thanks. This is what I need with getX package

Muhammad Vaid Over a year ago

Bad advice. You absolutely do not need to use GetX. Also, just avoid using GetX, in general.

Cristian Cruz · Accepted Answer · 2022-10-05 18:07:40Z

0

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
            )
          )
        )

answered Oct 5, 2022 at 18:07

Cristian Cruz

8177 silver badges6 bronze badges

Comments

Mahendra Telure · Accepted Answer · 2025-01-20 08:17:06Z

0

Just add barrierDismissible: false, in your showDialog

answered Jan 20 at 8:17

Mahendra Telure

417 bronze badges

Comments

Ravi Jaiswara · Accepted Answer · 2025-08-21 08:18:35Z

just add barrierDismissible: false, in you showGeneralDialog

 showGeneralDialog(
      context: context,
      barrierDismissible: false,
      barrierLabel: StringHelpers.dismiss,
      barrierColor: ColorConstants.blackColor.withValues(alpha: 0.5),
      pageBuilder: (context, animation, secondaryAnimation) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: Material(
            color: Colors.transparent,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: UiSizeConfig.isTablet
                  ? MediaQuery.of(context).size.height * 0.18
                  : MediaQuery.of(context).size.height * 0.35,
              decoration: BoxDecoration(
                color:

Collectives™ on Stack Overflow

Prevent dialog from closing on outside touch in Flutter

11 Answers 11

6 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

6 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related