FlutterFlow Docs
Search…
Custom Actions
While developing your app, you may want to use a package that is available on pub.dev. Using our Custom Actions editor, you can define/write the dart code to use a package. FlutterFlow allows you to define incoming/outgoing parameters and check the Custom Action for any errors right in the UI builder.

Supported Data Types

The following data types are available while defining the parameters for Custom Actions.
  • Integer: To pass/receive numbers such as 100, 4302, 50000, etc.
  • Double: To pass/receive a decimal number such as 12.43, 3233.50, 65.5666, etc.
  • String: To pass/receive plain text such as title, description, etc.
  • Image Path: To pass/receive the URL of the uploaded image.
  • Video Path: To pass/receive the URL of the uploaded video.
  • Audio Path: To pass/receive the URL of the uploaded audio.
  • Boolean: To pass/receive either a true or false value.
  • Document Reference: To pass/receive a reference of a document.
  • Document: To pass/receive the actual record i.e a Firestore document.
  • Timestamp: To pass/receive date and time value.
  • JSON: To pass/receive the JSON value such as {"firstName":"John", "lastName":"Doe"}.
  • TimestampRange: To pass/receive the start date-time and end date-time values.
  • Lat Lng: To pass/receive the latitude and longitude of a particular place.
  • GooglePlace: To pass/receive the GooglePlace data.

Creating A Custom Action

To create a custom Action:
  • Click on the Custom Function (
    ) from the Navigation Menu (left side of your screen).
  • Select the Custom Actions tab.
  • Click on the + Create button. This is will open a new popup window.
    • Give the Action a name inside the Action Name input box.
    • (Optional) if you want to get back the result of an action, Enable the Return Value.
    • Under the Return Value section,
      • Set the Data Type of return value to a suitable type. For example, if the Custom Action returns a text, set the Data Type to String. Find more about the supported Data Type here.
      • If your Custom Action returns the list of data such as a list of numbers or list of Fruits names, set the Is List to True otherwise, keep it as False.
    • Under the Define Arguments section,
      • Click on the + Add Argument to pass the parameter to a Custom Action.
      • Enter the name of the first parameter in the Argument 1 Name input box.
      • Set the Date Type of incoming value to a suitable type.
      • Determine whether you need to pass a single item or multiple and set the Is List to True/False accordingly.
    • Click on the </> View Boilerplate Code to see the generated code with all parameters.
      • Click on the </> Copy to Editor to start modifying from the generated code.
    • Click on + Add Dependency to import any package from pub.dev.
    • Under the Required Pubspec Dependencies enter the package name with its latest version. It should be something like packagename: ^version. If you are not sure how to get a package name and its version, follow the instructions here.
    • Inside the Editor on the right, add the import statement for a package.
      • To get the import statement of a package, follow the instructions here.
      • Add the code snippet of your custom action.
      • Replace the hard-coded values of the custom action with the parametername.
    • Click on </> Check Errors and then Compile. if everything goes right, you'll see the No Errors! button.
    • Click on Save.

Using A Custom Action

To use Custom Action, Create a page with some UI elements that give values to Custom Action, trigger Custom Action, and show the output of Custom Actions.
Here's an example of how you can use a custom action by following the below steps:

1. Design a Page

To design a page that accepts latitude and longitude values from users:
  • Create/Select a page.
  • Drag the Column widget from the Layout Elements tab.
  • Add a TextField (under Form Elements) inside the Column to accept the Latitude.
  • Add another TextField inside a Column to accept the Longitude.
  • Add a Button to trigger the Custom Action.
  • Add a Text Widget to show the result of Custom Action.

2. Adding Custom Action

Know how to add a Custom Action by visiting the following page:

3. Displaying Custom Action Result

To display the result of the Custom Action:
  • Click on the Set from Variable text. (This will open a new panel)
  • Set the Source to Action Outputs.
  • Set the Available Options to the Output Variable Name of the Custom Action.
  • Set the Default Value to any random text.
  • Click Save.
When you run the app, here's how the latitude and longitude are converted into the Geohash using the Custom Action (built using a package on pub.dev).

Formatting The Custom Action

While adding/modifying the code in the code editor, you may find some code is not properly aligned. To format the code, simply click on the Format Code icon (
) on the top right side of the code editor.

Editing A Custom Action

To edit a Custom Action:
  • Click on the Custom Function (
    ) from the Navigation Menu (left side of your screen).
  • Select the Custom Actions tab.
  • Identify the Custom Actions from the list and click on the edit icon (
    ).

Copying A Custom Action

To copy a Custom Action:
  • Click on the Custom Function (
    ) from the Navigation Menu (left side of your screen).
  • Select the Custom Action tab.
  • Identify the Custom Action from the list and click on the copy icon (
    ).
  • Click Yes.

Deleting A Custom Action

To copy a Custom Action:
  • Click on the Custom Function (
    ) from the Navigation Menu (left side of your screen).
  • Select the Custom Actions tab.
  • Identify the Custom Action from the list and click on the copy icon (
    ).
  • Click Delete.
You won't be able to delete a Custom Action if it is being used in the app. To successfully delete a Custom Action, make sure you are not using it anywhere.

Getting the Dependency

Dependency is a package (library) hosted on pub.dev. While creating the Custom Action, you may need the dependency name and its version so that FlutterFlow can download that dependency for your project.
To get the package/dependency name and its latest version:
  • Open the package/dependency page on pub.dev.
  • Click on the Copy icon(
    ) on the right side of the package name.
  • Paste the copied dependency inside the FlutterFlow.

Getting the Package Import Statement

Package Import Statement is usually a path where the code (you are using to create Custom Action) resides. While creating Custom Action, you need the package import statement to be written at the top in the code editor.
To get the package/dependency import statement:
  • Open the package/dependency page on pub.dev.
  • Select the installing tab.
  • Under the Import it section, copy the import statement by clicking on the Copy icon(
    ).
  • Paste it inside the Custom Action code editor.