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