Customize Your Alert Dialogs in Flutter

Picture created by Author (Flutter logo obtained from Flutter Brand Guidelines)

So recently I stumbled over Alert Dialogs while googling for a popup window in Flutter, but I wasn’t quite happy with the simple appearance of those Dialogs. In this article, we will customize an Alert Dialog so that a user can select his favorite programming language.

Basic setup

First, we need to create a simple app in Flutter. I simply took the counter App and replaced the body with a button in the center.

Add an Alert Dialog

Now we add the Alert Dialog that will pop up if a user presses the button. For this, we take the example of the Flutter dev page. We now change the title and add a confirm and abort button to the Dialog.

_showAlertDialog() {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Choose your favourite programming language!'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('This is a demo alert dialog.'),
                Text('Would you like to approve of this message?'),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: Text('Abort'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: Text('Confirm'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

Customize the Alert Dialog

Since the Alert Dialog hasn’t any selectable items, we add some. To make the items clickable we will use Radio Buttons and nest them into List Tiles to see what we click. As groupValue we create a new variable named language at the class that holds our List Tile widget. For every language we add, we must change the value and the text inside the List Tile. Every List Tile has an onChanged method that we use to change the language variable of the class to the currently selected language. Now the user can select his favorite programming language and will see a little dot at his selection.

Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text('Dart'),
          leading: new Radio(
            value: "Dart",
            groupValue: widget.language,
            onChanged: (String selectedLanguage) {
              setState(() {
                widget.language = selectedLanguage;
              });
            },
          ),
        ),
        ListTile(
          title: Text('Java'),
          leading: new Radio(
            value: "Java",
            groupValue: widget.language,
            onChanged: (String selectedLanguage) {
              setState(() {
                widget.language = selectedLanguage;
              });
            },
          ),
        ),
        ListTile(
          title: Text('Python'),
          leading: new Radio(
            value: "Python",
            groupValue: widget.language,
            onChanged: (String selectedLanguage) {
              setState(() {
                widget.language = selectedLanguage;
              });
            },
          ),
        ),
      ],
    );
  }

Show selected Item

The last step is to show the selected value as a text under the button and take it as a start value for the next time a user presses the button. To do that, we just set the state of the main widget after we changed the language variable to the language variable in the Alert Dialog widget.

Text(
         "Your favourite programming language is:",
         style: TextStyle(fontSize: 20.0),
         ),
         Text(
            language,
            style: TextStyle(fontSize: 20.0),
         ),

Now we got a customized Alert Dialog, that we can adapt to our needs.

The full code of the example is available on Github.