How to show Simple Dialog in Flutter

To show a “Simple Dialog” in Flutter is not that simple as it sounds. Why? Because the SimpleDialog Widget is passed as the child Widget to the function showDialog. Without the help of the function showDialog, we cannot display the SimpleDialog Widget.

We will discuss the function showDialog in a minute. Before that, let us try to understand what is the SimpleDialog Widget.

Firstly, it is a simple Material Design Widget which offers users a choice between several options.

Secondly, the SimpleDialog Widget has an optional title that positions itself above the choices.

Finally, the SimpleDialogOption Widget represent the choices. Therefore, we can use the SimpleDialogOption widget as an extension of the SimpleDialog.

Although people often get confused between the SimpleDialog Widget and the AlertDialog Widget, yet the purpose differs.

The AlertDialog Widget informs the user about a situation. And the SimpleDialog Widget offers users several choices.

With reference to this discussion, you may read the previous article on the Alert Dialog.

Let us see how the SimpleDialog Widget looks like. Moreover, how this Widget offers choices to the users.

Here is a screen or home page that asks us to select a writer.

When we press the Floating Action Button below, what do we see?

The Widget offers the user several choices. We can scroll up and down to see the whole list of writers. In addition, we can click any one of them to see the details.

If we click any of them, it takes us back to the home page again.

In fact, for simplicity, we have made this way. Otherwise, each item of the list may contain separate screen.

The function “showDialog()” returns a Future that resolves to the value that we have passed to Navigator.pop when the dialog is closed.

What is dialog in flutter?

As we see in the above image, when the SimpleDialog Widget appears, the content below is dimmed. It happens due to the ModalBarrier. And the function “showDialog()” builds the Dialog Widget with the help of builder.

Let us see the code now. First, we create the “Writer” class in Model folder.

class Writer {
  String name;

  Writer(this.name);
}

Next, we need a custom StatefulWidget because the Dialog Widget needs to update dynamically.

import 'package:flutter/material.dart';
import 'package:flutter_artisan/model/writer.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Writer? selectedwriter;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter SimpleDialog Example'),
      ),
      body: Center(
        child: Text(
          'Selected writer: ' +
              (selectedwriter == null ? 'Not Seleted.' : selectedwriter!.name),
          style: Theme.of(context).textTheme.headline3,
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          showMySimpleDialog(context);
        },
        label: Text(
          'Select a writer',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }

  void showMySimpleDialog(BuildContext context) {
    var writers = [
      Writer('Rabindranath Tagore'),
      Writer('Leo Tolstoy'),
      Writer('Ernest Hemingway'),
      Writer('George Simone'),
      Writer('James Hadley Chase'),
      Writer('Arthur Conan Doyele'),
    ];

    Future futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          //title: const Text('Select a writer:'),
          children: writers
              .map(
                (writer) => SimpleDialog(
                  children: [
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context, writer);
                      },
                      child: Text(writer.name),
                    ),
                  ],
                ),
              )
              .toList(),
        );
      },
    );

    futureValue.then(
      (writer) => {
        setState(() {
          selectedwriter = writer;
        })
      },
    );
  }
}

In the first case, we have wrapped the SimpleDialog Widget with another Simple Dialog Widget.

If we wrap the Simple Dialog Widget with a ListView Widget, that can also help us to scroll.

As a result the look changes.

For the full code snippet please visit the GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter