Flutter AlertDialog and SimpleDialog is a small widget that use to make a decision or enter information. It does not fill the entire screen. Its normally used for events that require users to take an action before they can proceed.

After completing this tutorial, you will know different use case of dialog in a Flutter:

  • Flutter popup AlertDialog example.
  • AlertDialog with a Button.
  • SimpleDialog for select options.
  • AlertDialog with TextField(EditText) for input.

1.Acknowledgement popup AlertDialog.

Popup dialog informs the user about situations that require acknowledgment. It has an optional action.

Flutter Popup Dialog

When user acknowledgment is required to proceed, a single action may be presented.

Passed child widget to showDialog to displays the dialog.

2.Confirmation Dialogs

Confirmation dialogs require users to confirm a choice before the dialog is dismissed. It presents a distinct choice to users through their title, content, and actions. Dialog actions are represented as buttons and allow users to confirm or dismiss something.

Flutter Dialog with Button

Confirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, so they have a chance to change their minds if necessary.

3.SimpleDialog for Select Options

Simple dialogs display a list of items that take immediate effect when selected.

Flutter SimpleDialog

The user is asked to select between two options. These options are represented as an enum. The showDialog method here returns a Future that completes to a value of that enum. If the user cancels the dialog e.g. by hitting the back button on Android or tapping on the mask behind the dialog then the future completes with the null value.

4.AlertDialog with TextField(EditText)

You can enhance the AlertDialog to make it able to accept user input, just like PromptDialog. More specific, this is a custom AlertDialog example.

Flutter Input Dialog

Returns a Future that resolves to the value that was passed to Navigator.pop when the dialog was closed.

showDialogfunction takes a builder which typically builds a Dialog widget. Content below the dialog is dimmed with a ModalBarrier. The widget returned by the builder does not share a context with the location that showDialog is originally called from.The context argument is used to look up the Navigator and Theme for the dialog. It is only used when the method is called. Its corresponding widget can be safely removed from the tree before the dialog is closed.

Complete Example