Actions
Actions help in handling user gestures (or, touch) inside the app.
For example, when a user taps on a Button, the action that should be performed can be specified from this Actions section.
Some of the common Actions that you can define include On Tap, On Double Tap, On Long Press, and so on.

Most of the widgets can handle three basic types of action:
- On Tap: Handles the user gesture of a single tap.
- On Double Tap: Handles the user gesture of double tap.
- On Long Press: Handles the user gesture of tapping and holding for some time.
Apart from these common types of action, there are a few more action types that can be applied only on some specific widgets:
FlutterFlow allows you to trigger and customize various Actions on any widget. A list of all the available Actions are as follows:
Navigation
Backend/Database
- Database: Use this to create, update or delete a record from a Firestore Collection, or trigger an API call
- Authentication: Triggers an authentication according to the type selected (eg. Login, Create Account, Phone Sign In, etc.)
UI Interactions
- Launch URL: Use an external URL to launch a webpage, send an email, use a phone number, and a lot more
- Launch Map: (docs coming soon)
- Group Chat Action: (docs coming soon)
- Drawer: (docs coming soon)
- Google Map: (docs coming soon)
- Control Page View: (docs coming soon)
Alerts
- Trigger Push Notification: (docs coming soon)
E-Commerce / Payments
Animations
- Lottie Animation: (docs coming soon)
- Rive Animation: T(docs coming soon)
Ad Mob
- Load Interstitial Ad: (docs coming soon)
- Show Interstitial Ad: (docs coming soon)
To add an action on the widget:
- 1.Select the widget on which you want to apply the action.
- 2.
- 3.Choose the gesture that you want to use, among On Tap, On Double Tap, and On Long Press.
- 4.Click + Add Action button.
- 5.Select an Action from the dropdown menu (appears on the right).
- 6.Configure its properties.
- 7.Click Close.
NOTE: Actions differ according to the widget selected. If you are applying an action on a TextField widget, On Submit gesture will be present. Similarly, if you are applying an action on the Scaffold widget, On Page Load will be available.

You can add multiple Actions to the same widget that should trigger on the same or different user gestures.
To add multiple actions:
- 1.Select the widget on which you want to apply the action.
- 2.
- 3.Choose the gesture that you want to use, among On Tap, On Double Tap, and On Long Press.
- 4.Click + Add Action button.
- 5.Select an Action from the dropdown menu (appears on the right).
- 6.Configure its properties.
- 7.To add another Action, click the "+" button present below the previous action tile and select Add Action.
- 8.Repeat steps 5-7 for adding more Actions.
- 9.Click Close.
The one on the top will be triggered first followed by the rest.

If you have added multiple Actions for the same user gesture, for say, you add two Actions for the On Tap gesture, then you can order the Actions to specify which Action should be triggered first, followed by the next one, and so on.
To reorder the actions:
- 1.Select the widget on which you have the actions applied.
- 2.
- 3.Select the gesture under which you have the Actions defined, among On Tap, On Double Tap, and On Long Press.
- 4.Use the arrows to reorder the Actions. Find the action you want to reorder and then click on the Up Arrow icon () to move it upwards or click on the Down Arrow icon () to move it downwards.
- 5.After you have Actions in the correct order, click Close.

While building your app, you may need to copy an action (probably the long or complex one) and paste/add it to the widget on the same or another page. The Copy Action feature allows you to copy single or all actions and paste/add them to another widget.
To copy a single action:
- 1.Select the widget on which you have the action applied.
- 2.
- 3.Select the gesture under which you have the action defined, among On Tap, On Double Tap, and On Long Press.
- 4.Click the Action Options menu (i.e., three dotson the top-right corner).
- 5.ClickCopy Action.
- 6.Click Close.
- 7.Select the other widget (on the same page or another) on which you would like to paste/add the copied action.
- 8.Click Add under the Actions section.
- 9.ClickPaste Action(s). You'll notice that your previously copied action is added to the current widget.
- 10.In the dialog box, click Paste.

To copy all the actions:
- 1.Select the widget on which you have the actions applied.
- 2.
- 3.Select the gesture under which you have the actions defined, among On Tap, On Double Tap, and On Long Press.
- 4.Click the Action Options menu (i.e., three dotson the top-right corner) of the top-most action.
- 5.ClickCopy Action Chain to copy all the actions below it (including the current one).
- 6.Click Close.
- 7.Select the other widget (on the same page or another) on which you would like to paste/add the copied actions.
- 8.Click Add under the Actions section.
- 9.ClickPaste Action(s). You'll notice that all your previously copied actions are added to the current widget.
- 10.In the dialog box, click Paste.

There's a significant probability you'll forget afterward how or why a specific action was introduced. Additionally, if you work in a team, other builders might want to know more about an action's existence or functioning, especially if it is a complicated one or a custom action.
By documenting an action, you may assist future you and others in remembering why it was included and learn more about the action. It helps you to make any change confidently and ultimately produces fewer bugs.
To document an action, open the action flow editor, select the action, and tap the document icon (
) on the right side, provide the description and save it. Click again to read or modify. You can also view code to see the documentation inside the code.

We will add the documentation inside the code as a comment.

Documenting an action

Read the action document inside the code
To delete action(s) added to the widget:
- 1.Select the widget on which you have the actions applied.
- 2.
- 3.Select the gesture under which you have the actions defined, among On Tap, On Double Tap, and On Long Press.
- 4.Click the Action Options menu (i.e., three dotson the top-right corner) of the action you want to delete.
- 5.ClickDelete Action. If you want to delete the entire chain of actions below it (including the current one), clickDelete Action Chain.
- 6.In the dialog box, click Remove.
.gif?alt=media&token=f5df41cb-7a86-4f85-8700-4cde8b042255)
Last modified 4mo ago