2 Types of Flutter Dialog – The Quickest Guide of 2022

The Dialog widget in Flutter pops up on the screen to get confirmation regarding the critical/irreversible task or let users know about the crucial information about the app. The dialog widget quickly draws the user’s attention by appearing in the center of the screen. When it appears it may or may not allow users to interact with other UI elements of your app and can be dismissed by clicking outside of a dialog. So in this tutorial, we’ll see how you can show 2 types of Flutter Dialog that include AlertDialog and SimpleDialog with practical examples.

Here’s how it looks:

Here’s what we’ll cover:

• Types of Flutter Dialog
• Showing AlertDialog in Flutter
• Showing SimpleDialog in Flutter

Types of Flutter Dialog

While developing your app, you can use the following two types of Flutter Dialog:

• AlertDialog
• SimpleDialog

Let’s see how you can add each type of dialog in your Flutter app and also understand when to use which one.

Showing AlertDialog in Flutter

The AlertDialog widget in Flutter is used to get confirmation from users for any critical action they have asked to perform. For example, you could show the Alerty dialog when a user wants to delete/discard any important data of their account. 

If you are a visual learner you can learn about the AlertDialog here:

Steps to show AlertDialog

Here are the steps to show AlertDialog in your Flutter app:

Step 1: Make sure you have a StatefulWidget.

Step 2: Create a method and return the showDialog widget.

Step 3: Inside the builder of showDialog, return an AlertDialog.

Step 4: Inside the AlertDialog, add the content parameter and return the ListBody.

Step 5: Inside the AlertDialog, add the actions parameter and return the two TextButton widgets for positive and negative action.

Step 6: Add a button (e.g. ElevatedButton) widget to your page.

Step 7: Inside the onPressed of button widget, call a method to open the AlertDialog.

Code Example:

Future<void> _showAlertDialog() async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog( // <-- SEE HERE
        title: const Text('Cancel booking'),
        content: SingleChildScrollView(
          child: ListBody(
            children: const <Widget>[
              Text('Are you sure want to cancel booking?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}
// --- Button Widget --- //
ElevatedButton(
  onPressed: _showAlertDialog,
  child: const Text(
    'Show Alert Dialog',
    style: TextStyle(fontSize: 24),
  ),
),

Note: By default, the AlertDialog is dismissed only when you click on any action button. To allows users to dismiss the AlertDialog on clicking outside the dialog, set the barrierDismissible:true.

Output:

Showing SimpleDialog in Flutter

The SimpleDialog widget in Flutter is used to display a list of options that users can select. For example, You could show the SimpleDialog when a user wants to switch to another account.

Steps to show SimpleDialog

Here are the steps to show SimpleDialog in your Flutter app:

Step 1: Make sure you have a StatefulWidget.

Step 2: Create a method and return the showDialog widget.

Step 3: Inside the builder of showDialog, return the SimpleDialog.

Step 4: Inside the SimpleDialog, add the children parameter and return the list of SimpleDialogOption widgets.

Step 6: Add a button (e.g. ElevatedButton) widget to your page.

Step 7: Inside the onPressed of button widget, call a method to open the SimpleDialog.

Code Example:

Future<void> _showSimpleDialog() async {
  await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog( // <-- SEE HERE
          title: const Text('Select Booking Type'),
          children: <Widget>[
            SimpleDialogOption(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('General'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Silver'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Gold'),
            ),
          ],
        );
      });
}
// --- Button Widget --- //
ElevatedButton(
  onPressed: _showSimpleDialog,
  child: const Text(
    'Show Simple Dialog',
    style: TextStyle(fontSize: 24),
  ),
),

Output:

Conclusion

In this tutorial, we learned the 2 types of Flutter dialog that you can use to grab the user’s attention which include AlertDialog and SimpleDialog. We learned that the dialogs are important UI elements for any application to interrupt the user and get confirmation on a critical task.

Would you like to check other interesting Flutter tutorials?