Shift-left benefits for mobile app development is not just a tool problem

As an app developer, you want to keep users of your app informed of important information, especially when you apply big changes in your app. In user interface design, we use alert dialogs for this purpose.
An alert dialog is a pop-up that displays on top of all the other content on the screen. While the alert dialog is visible, the user can’t interact with any other part of interface besides the alert dialog. The alert dialog contains a short message describing the situation and buttons underneath. Once the user clicks one of the buttons, the alert dialog disappears and the user can continue to interact with the app as before.
An example of when you might see an alert dialog is when you tap the sign-out button on an app. Usually, there’s a pop-up message with text such as “Are you sure you want to sign out?” and two buttons: Cancel and Sign Out. This alert dialog ensures that the user understands what’s about to happen and the user can acknowledge that they truly want to proceed.
Flutter provides widgets to enable developers to include alert dialogs in their Flutter apps. In this article, we’ll learn about:
Alert dialogs have a simple layout, comprising three main components. Below is a screenshot of what a typical alert dialog would look like.
The alert dialog is a card that floats on top of the content in the app. At the top of the card is a title widget that shows the overall message or question posed to the user. Directly underneath the title is a content widget that shows more detailed information about the alert. At the bottom of the card is a row of buttons. These buttons represent all the options that the user can select from as the next action.
Now that we know what the basic layout of an alert dialog looks like, let’s explore how to define these within a Flutter app.
Flutter provides two widgets for creating alert dialogs: one for defining an alert dialog that’s themed in alignment with Material Design, and another that’s themed to look like standard iOS alert dialog widgets. This allows developers to use the widget that best fits with the mobile platform the app will run on. We’ll explore each of these in the sections below.
The Flutter widget for creating a Material alert is called AlertDialog. You’ll find it in package:flutter/material.dart and can import it from there.
The screenshot below shows how the AlertDialog looks when used in an app.
The code to create this AlertDialog is shown below.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () => showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text('Sign Out of App?'),
content: const Text('Are you sure that you would like to sign out? You will lose all the content you downloaded.'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'Sign Out'),
child: const Text('Sign Out'),
),
],
),
),
child: const Text('Show Dialog'),
);
}
}
In this code snippet, we use the minimal properties for generating an AlertDialog, but the widget provides many more properties for customization.
The Flutter widget for creating an iOS style alert dialog is called CupertinoAlertDialog. You’ll find it in package:flutter/cupertino.dart and can import it from there.
This is what the CupertinoAlertDialog looks like when used in an app.
The code to create this CupertinoAlertDialog is shown below. You’ll notice that this is almost exactly the same as the code used for the Material alert dialog. The only difference is that we have replaced AlertDialog with CupertinoAlertDialog, and the function showDialog with showCupertinoDialog.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () => showCupertinoDialog<String>(
context: context,
builder: (BuildContext context) => CupertinoAlertDialog(
title: const Text('Sign Out of App?'),
content: const Text('Are you sure that you would like to sign out? You will lose all the content you downloaded.'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'Sign Out'),
child: const Text('Sign Out'),
),
],
),
),
child: const Text('Show Dialog'),
);
}
}
The CupertinoAlertDialog has fewer properties for customization than AlertDialog, described below.
Notice that in the sections above, we made use of built in functions to trigger the display of both the Material and Cupertino dialogs. These were the showDialog and showCupertinoDialog functions respectively. You can customize these functions by passing additional parameters to them.
For example, when the dialogs display, a partially transparent barrier appears between the main content of the app and the dialog. You can customize the color of this barrier when using an AlertDialog. Furthermore, for both AlertDialog and CupertinoAlertDialog, you can set the dialog to dismiss when the user taps the barrier.
In this article you learned about alert dialogs and how to use them to provide users with information that must be acknowledged before they can proceed using the app. We discussed the basic layout of an alert dialog, and we saw that Flutter provides two types of alert dialog widgets — one that conforms to the Material design style, and another that conforms to the iOS (Cupertino) design style. This lets you create apps that feel native on both iOS and Android.
With this knowledge, you can now build apps that alert users and will get their acknowledgment or decision at key points in your app’s user experience journey.
If you’d like to learn more about app development, please explore the Waldo blog to find excellent content on design, development, and testing.
This post was written by Daliso Zuze.Daliso is an expert in agile software delivery using Scrum. Besides that, he’s an experienced digital transformation consultant and entrepreneur. His technical skills center around mobile app development and machine learning.