FlutterFlow Docs
Searchโ€ฆ
API Call Query
You can use the API Call Query for automatically triggering an API call as the user navigates to the page where it's defined.

Prerequisites

To use the API Call Query, you should have at least one API Call defined inside your project. To know how to define an API Call, follow the instructions on this page:

Defining the Query

Go to your project page on FlutterFlow and follow the steps below to define an API Call backend query:
  1. 1.
    Select the widget (or page) on which to apply the query.
  2. 2.
    Select Backend Query from the Properties panel (the right menu).
  3. 3.
    Select the Query Type as API Call.
  4. 4.
    Choose the API Call Name from the dropdown. It would display all the API Calls that you have defined inside your project.
  5. 5.
    (Optional) If your API requires any parameter, click on + Parameter.
    1. 1.
      Select a Parameter Name.
    2. 2.
      Choose the Value Source either as Specific Value or From Variable.
    3. 3.
      If you have chosen Specific Value, then define the Value.
    4. 4.
      If you have chosen From Variable, then you have to select a Source and choose from the Available Options.
  6. 6.
    Click Save.
Defining an API Call query

Using Query Data

Once you have the API Call query defined, you can use the data retrieved from the query to set on the widgets present inside. Follow the steps below:
  1. 1.
    Select the widget (eg, Text) on which you want to set the record data.
  2. 2.
    From the Properties Panel, select Set from Variable.
  3. 3.
    Select the Source as the API Response.
  4. 4.
    Under Response Options choose JSON Body.
  5. 5.
    From the Available Options dropdown, select JSON Path.
  6. 6.
    Select JSON Path Name as Custom.
  7. 7.
    Enter the path name in the JSON Path field.
  8. 8.
    (Optional) You can enter a Default Value that would be shown when the selected JSON Path value is empty.
  9. 9.
    Click Save.
Using the API data inside widgets

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, 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 that you had 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) Youn can enter a Default value that would be used if the path value is empty.
  7. 7.
    Click Save.
  8. 8.
    You can follow Steps 1 to 7 for setting values on other widgets as well.
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.

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
The code generated for the API Call backend query will look similar to this:
1
FutureBuilder<ApiCallResponse>(
2
future: GetAPODCall.call(
3
apiKey: 'DEMO_KEY',
4
),
5
builder: (context, snapshot) {
6
if (!snapshot.hasData) {
7
return Center(
8
child: SizedBox(
9
width: 50,
10
height: 50,
11
child: CircularProgressIndicator(
12
color: FlutterFlowTheme.primaryColor,
13
),
14
),
15
);
16
}
17
final listViewGetAPODResponse = snapshot.data;
18
return ListView(
19
// ...
20
);
21
}
22
)
Copied!
  • FlutterFlow uses a FutureBuilder to handle the API call query.
  • In the future property, the API call is triggered by passing its required parameters.
  • Inside the builder, it is checked whether the response is available. If it's still processing a progress indicator is shown, otherwise snapshot.data is used to retrieve the response and display it inside a widget.

References

  • You can learn more about FutureBuilder from here.
  • FlutterFlow app templates using API Call query: FFTrivia and FlutterMet.