Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

How to Show Dialog + Alert Dialog in Flutter

July 12, 2020
in Flutter Widgets
4 min read
flutter alert dialog showDialog

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.

RELATED FLUTTER RESOURCES

Understanding The Flutter ListView Widget

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

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.

ADVERTISEMENT

SEE ALSO: Create Beautiful Effect with Simple Animation Package

flutter showDialog and AlertDialog
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

RelatedFlutter Resource

fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton
Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
Next Post
add flutter image to app

Image Widget - Everything You Need To Know

stateless or stateful widget?

When to use the Flutter Stateless Widget and Stateful Widget?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

How to Create a Rounded/Circular Button (Border-radius) In Flutter

How to Create a Rounded/Circular Button (Border-radius) In Flutter

August 11, 2020
fLUTTER ListView builder seperated

Understanding The Flutter ListView Widget

August 3, 2020
responsive scaffold flutter

How to use the Responsive Scaffold Package

June 25, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In