How to prevent AlertDialog from not closing by clicking outside?

I built an AlertDialog to display Loading while i'm authenticating the user and when it finishes i pop it.

Widget loadingDialog = new AlertDialog(
content: new Row(
  children: <Widget>[
    new CircularProgressIndicator(),
    Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: new Text("Loading..."),
    ),
  ],
),);

But, if the user taps outside the Dialog it closes. So when the auth finishes, it will still pop something (i guess the scaffol), breaking the app. How can i make Dialog not closable?

Upvotes: 35

Views: 17864

Answers (4)

Sachin Tanpure
Sachin Tanpure

Reputation: 1146

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

showDialog(
      barrierDismissible: false,    //this will prevent popup closing when touch outside of popup
      context: context,
      builder: (BuildContext context) {
        return WillPopScope(        // Wrap in WillPopScope widget
            onWillPop: () => Future.value(false), //this line will prevent popup closing when back button of phone press 
            child:AlertDialog(
            title: new Text("Alert Title"),
            content: new SingleChildScrollView(
              child: Container(),),
            actions: [
              new FlatButton(
                child: new Text("Close"),
                onPressed: () {
                },
              ),
            ],
          )
        )
      },
    );

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 268314

To prevent dismissing of dialog on press of a back button, you should also wrap your AlertDialog (or any other widget) inside a WillPopScope.

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

Upvotes: 11

Arun R. Prajapati
Arun R. Prajapati

Reputation: 2802

// User Defined Function void _showloding() {

// flutter defined function
showDialog(
  barrierDismissible: false, // JUST MENTION THIS LINE
  context: context,
  builder: (BuildContext context) {
    // return object of type Dialog
    return AlertDialog(
      content: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Container(height: 100,width: 100,child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(child: SizedBox(height: 50,width: 50,child: CircularProgressIndicator())),
            Padding(
              padding: const EdgeInsets.only(top: 20),
              child: Center(child: Text("Processing")),
            )
          ],
        )),
      )
    );
  },
);

}

Upvotes: 2

Vinoth Kumar
Vinoth Kumar

Reputation: 13471

There is a property inside showDialog called barrierDismissible. Setting this value to false will make your AlertDialog not closable by clicking outside.

showDialog(
   ...
   barrierDismissible: false,
   ...

Upvotes: 85

Related Questions