FlutterFlow Docs
Search…
Custom Functions
Using our Custom Functions editor, you can define/write/test the dart code directly in the UI editor. FlutterFlow allows you to define incoming/outgoing parameters and check the Custom Functions for any errors right in the UI builder.
Custom Function Example

Supported Data Types

The following data types are available while defining the parameters for Custom Functions.
  • 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 Function

Creating Custom Function typically comprises the following steps:
  1. 2.
    ​Adding The Code​
  2. 3.
    ​Testing The Code​

1. Defining The Custom Function

To define the Custom Function
  • Click on the Custom Function (
    ) from the Navigation Menu (left side of your screen).
  • Select the Custom Functions tab.
  • Click on the + Create button. This is will open a new popup window.
    • Give the Function a name inside the Function Name input box.
    • Under the Return Type section,
      • Set the Data Type of return value to a suitable type. For example, if the Custom Function returns a text, set the Data Type to String. Find more about the supported Data Type here.
      • If your Custom Function 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.
    • Now, under the Function Arguments section,
      • Click on the + Add Argument to pass the parameter to a Custom Function.
      • 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.

2. Adding The Code

To add the code for Custom Function:
  • After you have defined the Custom Function, select the </> Code tab.
  • Replace the text '// Add your function code here!' with your own custom code.
  • Click on Check Errors to see if you are ok to proceed.
You can also use the OpenAI Codex to help you add code for you. Find the instructions here.

3. Testing Code

Testing the Custom Function code allows you to see if your Custom Function works as expected against the various inputs. In general, it helps you gain confidence in shipping your app to production.
To test the code:
  • After you have added to the code, select the Test tab.
  • The first test is created automatically for you. Simply click on the Run button.
  • Verify the output of the Custom Function. (displayed below the Run button)
  • To add more tests, + Add Test button. This will open up a new test section.
  • Modify the input value and hit the Run button to see the output.
  • Click Save.
To run all your test together, click on the Run All Tests button.

Using A Custom Function

Before you use the Custom Function, make sure you have designed your page. For example, if you want to display the modified result of the backend query, make sure to add the ListView and then make the API call.
To use the Custom Function:
  • Click Select Page Or Component from the Navigation Menu (left side of your screen).
  • Select a Page on which you would like to add Custom Function.
  • Select the Widget on which you would apply the Custom Function.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset, and select the Custom Function from the list.
    • Under the Function Name, click on Unset and select your Custom Function.
    • (Optional) Click on the Edit Function to see/modify your Custom Function right from the UI Builder.
    • Under the Set Function Arguments, find your argument name (that you gave while creating Custom Function) and click on it to expand the section.
    • Set the Value Source to From Variable.
    • Set the Source and Available Options to the appropriate value from the list. (The values are displayed based on the backend query you made)
    • Click Save.
When you run the app, here's how the ListView display author names (in lowercase) after applying Custom Function.
Left (Before Custom Function) - Right (After Custom Function)

Using OpenAI Codex to Write Code

Sometimes it may get difficult to find and write the code manually. The OpenAI Codex translates natural language into code and can help you find the right code using AI (artificial intelligence)
Here's is an example of how to use OpenAI Codex:
  • Make sure you have defined the Custom Function.
  • Select the </> Code tab.
  • Enable the AI-Generated Code (Right side of your screen)
  • Inside the Enter Function Description box, write what you are looking for.
  • Click the Right side arrow button.
  • The code will be presented in the section below.
  • Click on Copy Function to get the code into the Custom Function Code editor.
To see additional options, you can refresh the results (green button) or try rephrasing your input query.
​Check out our YouTube video for additional examples of how you can use OpenAi with FlutterFlow.

Formatting The Custom Function

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.

Identifying Errors

It is possible that you may make mistakes while adding the code in the code editor. In this situation, our code editor helps you find the errors.
To identify the errors:
  • Find the line where the code editor shows the error icon (
    ).
  • Bring your mouse cursor over the line the see the exact error.
You can also click on the Check Errors button to see a list of all errors.

Editing A Custom Function

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

Copying A Custom Function

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

Deleting A Custom Function

To copy a Custom Function:
  • Click on the Custom Function from the Navigation Menu (left side of your screen).
  • Select the Custom Functions tab.
  • Identify the Custom Functions from the list and click on the copy icon (
    ).
  • Click Delete.
You won't be able to delete a Custom Function if it is being used in the app. To successfully delete a Custom Function, make sure you are not using it anywhere.
Copy link
On this page
Supported Data Types
Creating A Custom Function
1. Defining The Custom Function
2. Adding The Code
3. Testing Code
Using A Custom Function
Using OpenAI Codex to Write Code
Formatting The Custom Function
Identifying Errors
Editing A Custom Function
Copying A Custom Function
Deleting A Custom Function