How to use alert dialog in flutter

In our previous section we’ve learned how and why need to use About Dialog Box. However, the AlertDialog is something different. In this section we’ll learn how to use AlertDialog, and, moreover, why we need to mix such Dialog boxes in our Flutter Application.

Firstly, for a quick recapitulation, let us remember that in any Flutter application, we need to show or provide a license page. We can either build a custom License page, or we can take help from Flutter.The AboutDialog allows the users to see the license page by calling showLicensePage.

This showLicensePage shows the licenses for software used by the application on the LicensePage. It is provided by the LicenseRegistry API. Now, we can use the LicenseRegistry API to add more licenses to the List.

Secondly, besides this AlertDialog we need some more dialog boxes or pop ups.

The Alert Dialog is a material design widget. It basically informs the users about an information that needs their acknowledgement.

Let’s take a look at a sample code to understand what kind of parameters it has.

return AlertDialog(
            title: Text(
              'Save The Planet',
              style: Theme.of(context).textTheme.headline1,
            ),
            content: SingleChildScrollView(
              child: ListBody(
                children: [
                  Text(
                    'Plant Tress and reduce Carbon Emission.',
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                  Text(
                    'Would you like to approve of this message?',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ],
              ),
            ),
            actions: <Widget>[
              TextButton(
                child: const Text('Approve'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );

It has two optional parameters title and optional list of actions. The title is displayed above the content and the actions are displayed below the content, which is another parameter.

In the above code, we’ve used a scrolling widget for content, such as SingleChildScrollView, to avoid overflow.

However, we need to remember a key point to remember. Since the AlertDialog tries to size itself using the intrinsic dimensions of its children, we shouldn’t use widgets such as ListView, GridView, and CustomScrollView.

The ListView, GridView and CustomScrollView use lazy view-ports. That becomes a problem with the Alert Dialog. In case, we have to use such scrolling widgets, we can use Dialog directly.

There are other dialog boxes also. If users are offered choices between many options, we can use a SimpleDialog.

We’ll discuss Dialog, and SimpleDialog in separate sections.

How do you customise alert dialog in flutter?

To customise the alert dialog, we have several options. We can use a global ThemeData object with the hep of Provider package to provide a consistent look across the Flutter Application.

Moreover, the global theme and style consist a color scheme and font that matches the mood of the Flutter Application. We can even use multiple fonts to add more unique look to our Flutter Application.

As a matter of fact, we can design that Flutter application accordingly.

Let’s imagine a Flutter application through which we want to spread awareness about climate.

It can look like the following screenshot.

When we click the button, it takes us to the Alert Dialog box. Moreover, we can use our AppBar Drawer to open up more links.

If you have interest in knowing how we’ve customised this simple Flutter Application, please visit the dedicated GitHub Repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter