FlutterFlow Docs
Search…
API Call Query
You can use the API Call Query to trigger an API call automatically as soon as the page or widget is loaded. This is helpful if you want to retrieve the data from an API call and display it on a page or widget. For example, showing a list of items in a ListView, showing users details on several Text widgets.
API call query

Prerequisites

Before you add this action, ensure you create an API call in your project

Adding API Call query

Adding API call query comprises the following steps:

1. Quering API call

Go to your project page and follow the steps below to define an API Call backend query:
  • Select the widget (or page) on which to apply the query.
  • Select Backend Query from the Properties panel (the right menu).
  • Select the Query Type as API Call.
  • Choose the API Group or Call Name from the dropdown. It would display all the API Calls created in your project.
  • If your API call requires variables (e.g., auth token, query parameters, user id, etc.), pass their value by clicking on the + Set Additional Variable button.
  • Click Confirm.
Query API Call

2. Showing query data in UI element

Once you have the API Call query defined, you can use the data retrieved from the query to display on widgets present inside. Follow the steps below:
  • Select the widget (e.g., Text) on which you want to display the data.
  • From the Properties Panel, select Set from Variable.
  • Select the Source as the YOUR_API_CALL_NAME Response.
  • Set the API response Options to JSON Body.
  • Set the Available Options to JSON Path.
  • Set the JSON Path Name to either the custom JSON path or use the already created JSON path. See how to create a JSON path.
  • Click Confirm.
Showing query data in UI element

Passing data to another page

You can pass the data retrieved from the API Call to another page of your FlutterFlow app. First, you need to define a parameter on the page where you want to pass the data.
Follow the steps below to define a parameter for accepting JSON data:
  1. 1.
    Go to the page where you want to pass the data.
  2. 2.
    Click Define parameters button present on top of the Properties Panel.
  3. 3.
    Click + Add Parameter.
  4. 4.
    Enter a Parameter Name.
  5. 5.
    Select the Type as JSON.
  6. 6.
    Click Save.
Defining a JSON Parameter on a page
Now that you have the parameter defined go back to the page where you the API Call query. To pass the data to the new page, follow the steps below:
  1. 1.
    Select the widget on which you want to apply the Navigate Action.
  2. 2.
    Select Actions from the Properties panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose the On Tap gesture from the dropdown menu.
  5. 5.
    Select the Action Type as Navigate.
  6. 6.
    Choose Navigation Type as Navigate to Page, and select the page under Navigate To.
  7. 7.
    Click + Pass in Parameter.
  8. 8.
    Select the Parameter name from the dropdown.
  9. 9.
    Choose the Source as the API Response variable.
  10. 10.
    From the Response Options dropdown, select JSON Body.
Passing a JSON response to another page using Navigate Action
You can now use the API response data on the new page and set them to widgets:
  1. 1.
    Select the widget on which to set the data.
  2. 2.
    From the Properties Panel, click Set from Variable.
  3. 3.
    Select the Source as the parameter name you defined earlier on this page.
  4. 4.
    From the Available Options dropdown, choose JSON Path.
  5. 5.
    Enter the JSON Path name.
  6. 6.
    (Optional) You can enter a Default value that would be used if the path value is empty.
  7. 7.
    Click Save.
  8. 8.
    You can also follow Steps 1 to 7 for setting values on other widgets.
Defining the values on the new page
The app in action will look like this:
In this demo app, the first page (NASA Exploration) contains the NASA Open API response data retrieved from a Backend Query. It is then passed on to a new screen (Details) using a Navigate action, where the data is set to the respective widgets.
Copy link
On this page
Adding API Call query
1. Quering API call
2. Showing query data in UI element
Passing data to another page