FlutterFlow Docs
Search…
Advanced Functionality πŸ€–
Alert Dialog Action
The Alert Dialog widget helps to inform the user about situations that require acknowledgment. An Alert Dialog includes a title and a message along with some action buttons.
FlutterFlow allows you to define two types of Alert Dialog Actions:
  • Informational Dialog: Used to show some information that the user should be aware of before continuing to interact with the app. Contains only a single action button.
  • Confirm Dialog: Use to show a Dialog that triggers another Action, this dialog can contain two action buttons. These Dialogs can also be used before performing any non-revertable user action. For example, before deleting a user account.
Demo of triggering two types of Alert Dialog Actions

Define Informational Dialog Action

Go to your project page on FlutterFlow and follow the steps below to define an Upload Photo/Video Action to a widget:
  1. 1.
    Select the widget on which you want to set the Action.
  2. 2.
    Select the Actions from the Properties Panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Informational Dialog.
  6. 6.
    Enter a Title and Message.
  7. 7.
    Also, enter a Dismiss Text that will be shown on the action button.
Adding Informational Dialog Action to a button

Define Confirm Dialog Action

Navigate to a project page on FlutterFlow where you want to apply this action and follow the steps below to define a Confirm Dialog Action to a widget:
  1. 1.
    Select the widget on which you want to set the Action.
  2. 2.
    Select the Actions from the Properties Panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Confirm Dialog.
  6. 6.
    Enter a Title and Message.
  7. 7.
    Now, enter a Dismiss Text (shown on the action button that will cancel the Action) and a Confirm Text (shown on the action button that will trigger the Action that you will define in the next step).
  8. 8.
    Select an Action Type and configure that action accordingly. You will find more information about each of the Actions here.
Adding Confirm Dialog Action to a button for deleting a user

Code overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
Adding the Informational Dialog Action will generate a code like the following:
1
await showDialog(
2
context: context,
3
builder: (alertDialogContext) {
4
return AlertDialog(
5
title: Text('Saved successfully'),
6
content: Text(
7
'Your edited version of the photo is saved successfully.'),
8
actions: [
9
TextButton(
10
onPressed: () => Navigator.pop(alertDialogContext),
11
child: Text('Ok'),
12
),
13
],
14
);
15
},
16
);
Copied!
Here, showDialog() is an inbuilt method of Flutter that is used for displaying a Dialog widget. In this code snippet, there is a single action defined as it is an Informational Dialog.
In the case of Confirm Dialog Action, the generated code will be similar to this but with an additional action (in total two actions will be there) and it will capable of triggering another Action.

References

Check out the following links if you want to learn more about Dialogs: