How to show Dialog in Flutter

A dialog is a small window which is used to show a message to user. Alert dialog is used to ask the user to perform some action. User take decision and can accept or reject that particular action which was asked. In this tutorial we will see how to show Dialog in Flutter Applications.

showDialog Flutter

To show dialog in flutter we use showDialog method.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dialog'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text(
            'Delete Item',
          ),
          onPressed: () {
            showAlertDialog();
          },
        ),
      ),
    );
  }

  void showAlertDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('Delete?'),
            content: const Text('Are you sure you want to delete this item?'),
            actions: [
              ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.green),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text('No')),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.red),
                  onPressed: () {
                    // Write code to delete item
                  },
                  child: const Text(
                    'Delete',
                  )),
            ],
          );
        });
  }
}

Output

This dialog can be dismissed by tapping anywhere on the screen. If you want to restrict this behavior of Dialog add barrierDismissable=false property in show dialog method. Now this dialog can only be dismissed by tapping on no button.

How to show dialog in Flutter With Blur Background ?

Above we have learned that how to show dialog in flutter by using showDialog method. Now to enhance the UI of our app and draw full attraction of user on dialog we can blur the background of Screen. So that the focus of the user will be only on Dialog.

To blur background of Dialog wrap AlertDialog with BackdropFilter Widget.

void showAlertDialog() {
  showDialog(
    barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: AlertDialog(
            title: const Text('Delete?'),
            content: const Text('Are you sure you want to delete this item?'),
            actions: [
              ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.green),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text('No')),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.red),
                  onPressed: () {
                    // Write code to delete item
                  },
                  child: const Text(
                    'Delete',
                  )),
            ],
          ),
        );
      });
}

Output

How to Customize Alert Dialog in Flutter?

To make dialogs according to our requirement we can customize the dialogs. And we can also use the dialog packages provided by Flutter. Which help us to make more attractive dialogs with less effort. You just need to add these packages in pubspec.yaml file and use dialogs.

Here is an example of awesome_dialog

Add this line in pubspec.yaml file

awesome_dialog: ^2.2.1

And run this command in terminal

flutter pub get 

After this go to main.dart and modify your showAlertDialog method like this

void showAlertDialog() {
  AwesomeDialog(
    context: context,
    dialogType: DialogType.WARNING, 
    animType: AnimType.BOTTOMSLIDE,
    title: 'Delete?',
    desc: 'Are you sure you want to delete this item?',
    btnCancelOnPress: () {},
    btnOkOnPress: () {},
  ).show();
}

Output

This is a simple example of awesome_dialog. Which is a third party library available on pub.dev. You can find more other dialog packages from there to make your app more attractive with less code.

Here are some other most commonly used alert dialog packages.

1. aesthetic_dialogs
2. adaptive_dialog
3. awesome_dialog
4. rflutter_alert

Conclusion

In this tutorial we discussed how to show alert dialog in Flutter apps with examples and see how to add third party packages for dialogs in our project. Hope you will understand the use of dialogs and now can easily add this in you project.

Thank you for reading!