How to Show Dialog + Alert Dialog in Flutter

Do you know that alert that pops up when you want to perform an action? It is called the AlertDialog and works with the method showDialog(). Here’s how you can show dialog using the Alert Dialog method in Flutter.

What is showDialog() in Flutter

showDialog() is a built-in Flutter method. You must supply a context and a builder method that returns a Widget, usually either SimpleDialog or AlertDialog. The AlertDialog has an actions parameter – a List of (typically) FlatButtons that let the user dismiss the dialog.

SEE ALSO: Create Beautiful Effect with Simple Animation Package

RaisedButton(
  child: const Text('I am a button. Press me'),
	onPressed: () => showDialog<void>(
	context: context,
	builder: (BuildContext context) {
		return AlertDialog(
		content: const Text('Press OK to continue'),
			actions: <Widget>[
		FlatButton(
	child: const Text('OK'),
		onPressed: () => Navigator.pop(context)),
],
);
},
)

This looks more complex than it needs to be. And this is the simplest form! It gets more complex if you want to give the user choices.

Responses with a Dialog

showDialog() returns a Future<T> which means that you can have it return a value to its caller. Let’s pretend you want the user to respond with yes or no

You might create the dialog and handle the response like this:

RaisedButton(
child: const Text('Get a response'),
onPressed: () async {
// The builder returns the user's choice here.
// Since it is a Future<String>, we 'await' it to
// convert it to a String
String response = await showDialog<String>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: const Text('Are you sure?'),
actions: <Widget>[
FlatButton(
child: const Text('Yes'),
// Return "Yes" when dismissed.
onPressed: () => Navigator.pop(context, 'Yes')),
FlatButton(
child: const Text('No'),

// Return "No" when dismissed.
onPressed: () => Navigator.pop(context, 'No')),
],
);
},
);
// Do things with the response that we 'await'ed above.
print(response);
},
),

Important Tip: As the name suggests, the SimpleDialog widget is a simpler version of the AlertDialog. It doesn’t have actions and has fewer constructor parameters like titleTextStyle, contentTextStyle, and the like. Use it mainly if you don’t
need the user to respond to the prompt but simply to inform.

Navigation methods can be combined

While you can stack navigate to a widget with a drawer and from there to a widget with a tab, you should be careful. The methods are not incompatible, but, boy, they can get complex when mixed! For example, if you stack navigates via push() to a widget with a drawer, the back button in the app bar is no longer available. Android has a softback button at the bottom, but iOS does not. So the user is now stuck with no way to return. Another example, a TabBarView has widgets, but these are hosted so to speak so they should have no Scaffold. If you tried to navigate to that same widget using either of the other two methods, you have no way to get back … no drawer to show and no back button to tap.

Again, the user is stuck. We recommend sticking to just two different types and keeping the levels consistent. For example, it is pretty common to have a tabbed navigation experience for the user, and within each tab, you’ll work with stack navigation. But get much more complex than that and you may get your hands full.

Conclusion

Using the showDialog() & Alert Dialog in Flutter is a great way to improve your User Experience. Still having issues? Ask the FlutterFix community.

Read More about the Flutter showDialog here: https://api.flutter.dev/flutter/material/showDialog.html