FlutterFlow Docs
Search
⌃K

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.

Types of Action

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:
  • On Submit: This can be applied on a TextField widget. The action will be called when the user indicates that they are done editing the text of the field.
  • On Page Load: This can be applied on the Scaffold widget. The action will get triggered as soon as the page loads.

List of Actions

FlutterFlow allows you to trigger and customize various Actions on any widget. A list of all the available Actions are as follows:
Navigation
  • ​Navigate: It allows you to either move to a different page or go back to a previous page within the app
  • ​Wait: Delay an action before starting another action.
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.)
  • ​Algolia Search: Triggers an Algolia search on a Firestore Collection
  • ​Custom Action: Executes a dart code from a package that is available on pub.dev
  • ​Simple Search: Search from the Firestore collection, list of documents, and list of strings
  • ​Update Local State: Handle setting or clearing values for the Local State variable
  • ​Google Analytics Event: Log custom events using Google Analytics
UI Interactions
  • ​Upload Media: To upload a photo or video to Firebase Storage from the camera/gallery
  • ​Date/Time Picker: Opens up the Date/Time Picker widget
  • ​Bottom Sheet: Opens up the Bottom Sheet widget
  • ​Scan Barcode/QR code: Opens up an interface to scan a barcode or QR code.
  • ​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)
  • ​Set Dark Mode Settings: Action to change app from light to dark mode
  • Group Chat Action: (docs coming soon)
  • Drawer: (docs coming soon)
  • Google Map: (docs coming soon)
  • ​Expand Image: Expands an image to full screen
  • ​Clear Text Fields: Helps in removing any text present in multiple fields with just one click
  • ​Validate Form: Trigger validations for a form.
  • ​Set App Language: Action to change the app language
  • Control Page View: (docs coming soon)
Alerts
  • ​Share: Triggers the native sharing functionality of the device
  • ​Show Snack Bar: Triggers a snack bar
  • ​Alert Dialog: Opens up an Alert Dialog widget
  • Trigger Push Notification: (docs coming soon)
E-Commerce / Payments
Animations
  • ​Animation: Triggers an animation that is applied to any widget
  • 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)

Adding Action

To add an action on the widget:
  1. 1.
    Select the widget on which you want to apply the action.
  2. 2.
    From the Properties panel (the right menu), click + Add under the Actions section.
  3. 3.
    Choose the gesture that you want to use, among On Tap, On Double Tap, and On Long Press.
  4. 4.
    Click + Add Action button.
  5. 5.
    Select an Action from the dropdown menu (appears on the right).
  6. 6.
    Configure its properties.
  7. 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.

Adding Multiple Actions

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

Reordering Actions

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. 1.
    Select the widget on which you have the actions applied.
  2. 2.
    From the Properties panel (the right menu), click Edit under the Actions section.
  3. 3.
    Select the gesture under which you have the Actions defined, among On Tap, On Double Tap, and On Long Press.
  4. 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. 5.
    After you have Actions in the correct order, click Close.

Copying Actions

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.

Copying Single Action

To copy a single action:
  1. 1.
    Select the widget on which you have the action applied.
  2. 2.
    From the Properties panel (the right menu), click Edit under the Actions section.
  3. 3.
    Select the gesture under which you have the action defined, among On Tap, On Double Tap, and On Long Press.
  4. 4.
    Click the Action Options menu (i.e., three dots
    on the top-right corner).
  5. 5.
    Click
    Copy Action.
  6. 6.
    Click Close.
  7. 7.
    Select the other widget (on the same page or another) on which you would like to paste/add the copied action.
  8. 8.
    Click Add under the Actions section.
  9. 9.
    Click
    Paste Action(s). You'll notice that your previously copied action is added to the current widget.
  10. 10.
    In the dialog box, click Paste.

Copying All Actions

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

Document an Action

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

Deleting Action(s)

To delete action(s) added to the widget:
  1. 1.
    Select the widget on which you have the actions applied.
  2. 2.
    From the Properties panel (the right menu), click Edit under the Actions section.
  3. 3.
    Select the gesture under which you have the actions defined, among On Tap, On Double Tap, and On Long Press.
  4. 4.
    Click the Action Options menu (i.e., three dots
    on the top-right corner) of the action you want to delete.
  5. 5.
    Click
    Delete Action. If you want to delete the entire chain of actions below it (including the current one), click
    Delete Action Chain.
  6. 6.
    In the dialog box, click Remove.
Previous
Hero Animations
Next
Navigation
Last modified 4mo ago