How to handle dialog result correctly

When you show a dialog in your Flutter app, sometimes you need to know what the user did inside that dialog. Maybe they clicked 'Yes', 'No', or chose an option.

Why the Common Mistake Happens

Some developers try to run code right after they call Navigator.of(context).pop(); inside the button press handler of the dialog. They expect this code to run just before or as the dialog closes.

The Problem

When you call Navigator.pop(), the dialog is removed from the screen's navigation stack. Any code you try to execute immediately after pop() might not finish or even start reliably because the context or widget tree state is changing rapidly as the dialog disappears. This can lead to unexpected bugs or behavior.

The Correct Way to Get a Result

Flutter's Navigator.pop() method has a useful feature: you can pass a value to it!

Passing the Result

Instead of just Navigator.of(context).pop();, you can use Navigator.of(context).pop(yourResult);. Here, yourResult is the value you want to send back to the code that showed the dialog.

Receiving the Result

The function you used to show the dialog (like showDialog or showModalBottomSheet) actually returns a Future. This Future completes with the value that was passed to Navigator.pop() when the dialog is dismissed.

Using await

To get the result, you use the await keyword when calling the function that shows the dialog.

Future<void> _showMyDialog(BuildContext context) async {
  final result = await showDialog<MyResultType>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(MyResultType.option1),
            child: const Text('Option 1'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(MyResultType.option2),
            child: const Text('Option 2'),
          ),
        ],
      );
    },
  );

  // Now you can safely use 'result' here
  if (result != null) {
    print('Dialog result: $result');
    // Perform actions based on the result
  }
}

By using Navigator.pop(result), you ensure the value is correctly passed back through the navigation system, and you can handle the result reliably after the dialog is fully dismissed and the Future completes. This is the clean and recommended way to handle dialog results in Flutter.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

Frequently Asked Questions

How do I get a value back from a dialog in Flutter?

You get a value back by passing it to `Navigator.of(context).pop(yourValue);` inside the dialog's button actions. Then, you `await` the dialog's `showDialog` call and get the value from the awaited result.

Why shouldn't I put code right after Navigator.pop()?

Putting code immediately after `Navigator.pop()` within the same function call can be unreliable because the context and widget tree are changing as the dialog is being dismissed. The code might not execute correctly.

What does Navigator.pop() do?

Navigator.pop() removes the current route (like a page or dialog) from the top of the navigation stack. It can optionally return a value to the route that pushed it.

How do I make a function wait for a dialog result?

You use the `await` keyword before the `showDialog` function call within an `async` function. The code execution will pause until the dialog is dismissed and returns a value.