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
RevenueCat: Handle in-app purchases and subscriptions using RevenueCat
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.
Select the widget on which you want to apply the action.
2.
From the Properties panel (the right menu), click + Add under the Actions section.
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.
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.
Select the widget on which you want to apply the action.
2.
From the Properties panel (the right menu), click + Add under the Actions section.
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.
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.
Select the widget on which you have the actions applied.
2.
From the Properties panel (the right menu), click Edit under the Actions section.
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.
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.
Select the widget on which you have the action applied.
2.
From the Properties panel (the right menu), click Edit under the Actions section.
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 dots
on the top-right corner).
5.
Click
Copy 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.
Click
Paste Action(s). You'll notice that your previously copied action is added to the current widget.
10.
In the dialog box, click Paste.
Copying All Actions
To copy all the actions:
1.
Select the widget on which you have the actions applied.
2.
From the Properties panel (the right menu), click Edit under the Actions section.
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 dots
on the top-right corner) of the top-most action.
5.
Click
Copy 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.
Click
Paste Action(s). You'll notice that all your previously copied actions are added to the current widget.
10.
In the dialog box, click Paste.
Deleting Action(s)
To delete action(s) added to the widget:
1.
Select the widget on which you have the actions applied.
2.
From the Properties panel (the right menu), click Edit under the Actions section.
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 dots
on the top-right corner) of the action you want to delete.
5.
Click
Delete Action. If you want to delete the entire chain of actions below it (including the current one), click