How to Prevent Dialog from Closing Outside Barrier Touch in Flutter

In this example, we are going to show you how to prevent the dialog from dismissing on touch at the outside barrier of showDialog in Flutter. You can force users to take options from the dialog button, and manually dismiss the dialog from the code.

See this also: How to Dismiss showDialog in Flutter

How to Prevent Dialog from Closing on Outside Touch:

showDialog(
    barrierDismissible: false,
)

To prevent the dialog from closing on outside barrier touch, you have to set barrierDismissible to false. It is true by default.

For Example:

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return AlertDialog(
      title: Text('Alert Dialog'),
      content: Text('Do you really want to submit?'),
      actions: <Widget>[
        TextButton(
            onPressed: () {
                  //action code for "Yes" button
            },
            child: Text('Yes')),
        TextButton(
          onPressed: () {
              Navigator.pop(context); //close Dialog
          },
          child: Text('Close'),
        ),
      ],
    );
});

Full App Example Code:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Show Dialog"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [

                 ElevatedButton(
                  onPressed: () async {
                      showDialog(
                        context: context,
                        barrierDismissible: false,
                        builder: (context) {
                          return AlertDialog(
                            title: Text('Alert Dialog'),
                            content: Text('Do you really want to submit?'),
                            actions: <Widget>[
                              TextButton(
                                  onPressed: () {
                                        //action code for "Yes" button
                                  },
                                  child: Text('Yes')),
                              TextButton(
                                onPressed: () {
                                    Navigator.pop(context); //close Dialog
                                },
                                child: Text('Close'),
                              ),
                            ],
                          );
                       });
                  }, 
                  child: Text("Show Dialog")
                ),
                
            ],)
          )
       );
  }
}

Output Screenshot:

In this way, you can prevent the dialog from dismissing on outside barrier touch in Flutter.