A look at using one of Flutter’s Dialog Widgets

Image for post
Image for post

There is a lot going on ‘under the hood’ when you display what you would think is a simple dialog window with some text and some buttons. See in the screenshot below how the background darkens when presenting to the user a small box with its message and buttons. While the AlertDialog widget is involved in this presentation, there are other widgets working behind the scenes. This article will discuss briefly what’s truly involved as well as give an extensive tour of what makes up the widget, AlterDialog.

Screenshots Only. Click For Gists.

As always, I prefer using screenshots over gists to show code in my articles. I find them easier to work with, and easier to read. However, you can click/tap on them to see the code in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program mostly on our computers; not on our phones. For now.

No Moving Pictures No Social Media

Note, there will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. Please, be aware of this and maybe read this article on medium.com

Let’s begin.

Image for post
Image for post
Other Stories by Greg Perry

As described in the documentation, an AlertDialog widget is typically passed as a child widget to the high-level function called, showDialog, which then displays that dialog and returns any result as a Future object. See below.

In fact, the function, showDialog, will call yet another function called, showGeneralDialog, which creates a ‘route’ (Flutter’s version of a screen or a page) to then display the dialog window on top of the current screen or page. Note, you can see in the function, showDialog, that the colour used to ‘darken’ the background while displaying the dialog is, Colors.black54.

The high-level function, showDialog, is commonly used because it readily has the means to return a result from the ‘response’ made by the user. For example, in the sample code (found in the Flutter Gallery), any value returned (i.e. any button pressed) is displayed in the app’s snackbar. You can see the ‘then() method’ is used by the function, showDialog, to manage any returning Future object.

The ‘child’ widget supplied to this function is the AlertDialog widget first displayed above. It’s listed again below, but now highlighting the values possibly returned through the Navigator as it ‘pops out’ of the current route — values defined by the function called, showGeneralDialog. See how it all fits?

Image for post
Image for post
dialog_demo.dart

Looking at the AlertDialog class itself, you get an appreciation of the complexity involved in just displaying some text and a few buttons ending with yet another widget called Dialog. It’s this widget that takes the ‘content’ now embodied in the widget, dialogChild.

Image for post
Image for post
dialog.dart

The class, Dialog, is a StatelessWidget that finally displays the dialog window onto the screen. At a glance, however, you can see a number of other widgets are involved in displaying the designated content.

Image for post
Image for post
dialog.dart

Let’s go through the additional parameters offered by the AlertDialog widget.

Image for post
Image for post
dialog.dart

Right off the hop, there’s the named parameter, shape. Personally, I like putting some rounded corners on my dialog windows. Below, you see how that’s done with the code straddled by ‘before and after’ screenshots. Note, it’s an example that also includes a title in the dialog window.

Please, don’t think it’s just some text and a few buttons that are only displayed in AlertDialog widgets. The example code from the package, flutter_colorpicker, utilizes three AlertDialog widgets to demonstrate its functionality — and it’s not some text and a few buttons. Instead, it provides you three different ways to visually select a colour.

You can see the second color picker is given all the space it wants. With the parameters, EdgeInsets.all(0.0), there’s no space given for a title and there’s no space surrounding the colour picker itself. See below. I’ve taken liberties and have introduced rounded corners to this color picker as well.

Further note, the widget, SingleChildScrollView, seen below is commonly used for content that would otherwise exceed the available space. It’s well suited for dialog windows where, in this case, the ‘content’ indeed exceeds the size of the window itself and therefore is required to scroll.

Colour is available to the AlertDialog widget with the named parameter, backgroundColor. You can get rather imaginative with a dialogue window’s shape and colour as you see in the example code below.

Alert To Style

Of course, Flutter supplies named parameters like titleTextStyle and titlePadding to further define the alert box’s look and feel. This is quickly demonstrated by the two screenshots below.

Note what happens, for example, if one comments out the explicit styling defined for the ‘content’ parameter below.

Here you are. A quick review of a common feature seen in mobile apps. Let’s leave it there in the hope you’ve gained some insight into such a fundamental feature in mobile apps.

Cheers.

→ Other Stories by Greg Perry

Image for post
Image for post
DECODE Flutter on YouTube

Freelance Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store