How to work with dialogs, toasts, and overlays in Flutter apps

Flutter category image

Flutter offers predefined widgets for dialogs, toasts, and overlays. Here is how you use them properly with code examples!

Dialogs are a common pattern in many applications. In this article, I’ll introduce you to the built-in possibilities of Flutter for creating dialogs. We will cover the following widget types:

AlertDialog (and CupertinoAlertDialog)
SimpleDialog
Dialog
Overlay
Toast

Join my free Medium Newsletter!

Get an overview of my new Medium content with my monthly newsletter. Save time and pick what you like to read!

AlertDialog (and CupertinoAlertDialog)

The AlertDialog is the most simple way to display information to the user that he needs to react to. It’s a simple widget with a title (heading), a content (message), and a list of actions (one or more buttons).

The AlertDialog has some additional properties compared to the CupertinoAlertDialog. There is, for example, the icon property that lets you add an icon on top of the heading.

To invoke the widget, use the showDialog function. If you don’t want that users can close the dialog by tapping anywhere outside of it, set the barrierDismissible value to false. In this case, you must take care of closing the dialog with Navigator.of(context).pop(), for example.

Here are two screenshots from the demo application of the dialogs:

Flutter AlertDialog example by author
Flutter AlertDialog example by author
Flutter CupertinoAlertDialog example by author
Flutter CupertinoAlertDialog example by author

SimpleDialog

The SimpleDialog gives you more freedom to design your dialog. The basic properties are only a title and a list of children. Its main purpose is to choose from a selection of options. Instead of a button bar at the bottom, you can add multiple selection options with the SimpleDialogOption widget. Like the AlertDialog, the SimpleDialog is triggered by the showDialog() method.

Flutter SimpleDialog example by author
Flutter SimpleDialog example by author

Dialog

The Dialog is the purest dialog you can have. It needs only one child, so you can use your entire creativity to style it the way you want. Apart from that, it works similarly to the AlertDialog and the SimpleDialog.

Flutter Dialog example by author
Flutter Dialog example by author

Overlay

An Overlay is a widget that will be placed on top of all other widgets. You can think of it as a Stack widget, but it can be put on top of any page in your app. You need to create an OverlayEntry first that contains the widget to be displayed. To display it, call Overlay.of(context)!.insert(overlayEntry);. To remove it, call overlayEntry?.remove();.

Overlays don’t use the ThemeData of Text widgets. So you need to style all Text widgets or your Overlay will look like this:

Flutter Overlay example by author
Flutter Overlay example by author
Flutter Overlay example by author
Flutter Overlay example by author

Toast

To display a toast notification, a SnackBar can be used. A SnackBar will be displayed at the bottom of your screen and will auto-hide after 4 seconds by default. You can add any widgets you want and customize various properties like dismissDirection (a swipe to the set direction will hide the widget) or duration (timespan after that the widget hides).

A SnackBar can only be used inside a Scaffold. To show a SnackBar, call the showSnackBar(…) method of the ScaffoldMessengerState. Hiding works similarly with the hideSnackBar() method.

Flutter SnackBar example by author
Flutter SnackBar example by author

Conclusion

In this article, you saw the differences between the different dialog widgets and how to use them. You can find the demo application with the working examples on GitHub.

Related articles