FlutterFlow Docs
Search…
API Calls
On FlutterFlow, you can build applications to interact with thousands of external services using their APIs.
If you are brand new to APIs, you may want to check out this in-depth APIs for beginners tutorial video.

What is an API?

The acronym API stands for Application Programming Interface. It lets a product or service (in this case it's the app that you are building ) communicate with other products and services through a secured channel without sharing much information about their implementation.
The two most popular API specifications are SOAP and REST. We won't go into much depth about these here, just to give you a brief idea:
  • ​SOAP: Also known as Simple Object Access Protocol that uses XML for their message format and receives requests through HTTP or SMTP.
  • ​REST: Acronym for Representational State Transfer is an architectural style followed by various APIs. REST APIs are known for their fast performance & reliability.
Most of the Web APIs that you will be dealing with are in REST with JSON format as this is the most predominant specification now.

Methods of API Call

While defining a REST API Call, you will need to specify the type of HTTP method to use. You can select between two HTTP methods for an API Call on FlutterFlow:
  1. 1.
    GET request
  2. 2.
    POST request
Let's take a look what's the difference between the GET and POST requests.

GET request

The GET request is commonly used for retrieving data from a server, it doesn't allow any modification of resources present on the server.
For any HTTP GET request, if the resource is found on the server, then it returns the response code of 200 (OK) along with the response body that is usually in JSON format.
If the requested resource is not found on the server, then the server returns the response code of 404 (NOT FOUND) and an empty body.
In case the GET request is not properly formatted, then the server returns the response code of 400 (BAD REQUEST).

POST request

The POST request is used for sending data to the server in order to create or update a resource. JSON format is usually used for sending the data to the server.
For any HTTP POST request, if it creates any resource on the server, then it returns the response code of 201 (Created) and may return a response body.
If the request doesn't create a new resource rather modifies an existing resource, then the response code returned is either 200 (OK) or 204 (No Content) indicating successful completion of the request.
If the server refuses or fails to authorize the request, then it returns the response code of 403 (Forbidden).

Headers

Headers typically carry the metadata associated with an HTTP request or response of an API call. HTTP headers are mainly grouped into two categories:
  • Request headers contain more information about the resource to be fetched, or about the client requesting the resource.
  • Response headers hold additional information about the response that will be returned by the server.
While defining an HTTP GET or POST request, the Header that you will be defining is called the Request header.
Some of the common Headers that you might need while sending a request are:
  • Authorization: Used for authenticating the request by the server.
  • Content-Type: Used while sending a POST request containing a message body
The default Content-Type for any HTTP POST request is application/json, so if your data body is in JSON you can skip defining the Content-Type.

Query Parameters

They are optional parameters that you can pass with an API call, they help in formatting the response data returned by the server. Usually, they are concatenated at the end of the URL with a question mark (?) as the delimiter and are represented as key-value pairs.
An example of an URL with query parameters look like this (NASA Open API):
Here, start_date, end_date, and api_key are the query parameters that are passed for formatting the data retrieved by this URL.

Add API Calls

In order to use an API in your app, first, you have to add the API Call that you want to use on FlutterFlow.
Follow the steps below to add an API Call:
  1. 1.
    Go to the project on FlutterFlow in which you want to add the API Call.
  2. 2.
    Select API Calls from the left Navigation Menu to go to the API Configuration page.
  3. 3.
    Click Add API Call button.
  4. 4.
    Enter a name for the API Call.
  5. 5.
    Select the Method Type: GET or POST.
  6. 6.
    Enter the API URL of the service you want to access.
If you have selected GET request, follow the steps below:
  1. 1.
    (Optional) You can click on Add Header to add a header to the API Call if it requires any.
  2. 2.
    (Optional) You can pass parameters to the API call from the UI Builder, click on Add Parameter to define a parameter.
  3. 3.
    Finally, click Add Call to save the API Call.
NOTE: You can add multiple headers and parameters to the same API Call.
If you have selected POST request, follow the steps below:
  1. 1.
    (Optional) You can add a header to the API call (if required) by clicking on Add Header, and then setting a Name and a Value to it.
  2. 2.
    (Optional) You can pass Variables to the API call by clicking on Add Variable. Specify a Name and Value Type of the variable, you can also set a Default Value to it.
  3. 3.
    Select the type of data that you want to send in the POST request under Body.
  4. 4.
    Enter the data to be passed inside the text box present under the body type. For example, if you have selected JSON as the body type, enter the JSON data to be passed here.
  5. 5.
    Finally, click Add Call to save the API Call.
Some important points to keep in mind while defining an API Call:
  • Most APIs require authentication to access their server, authentication data (for example, API KEY) is usually passed in the Header of the API call. Follow the API Docs of the particular service that you are using to get the proper format of passing the data.
  • In POST requests, you can use the Variables inside the data body that you want to pass to the API call.
  • In POST requests, you can format the data body that you enter inside the text box by clicking the Format button.

Trigger API Calls

There are two methods that you can use to trigger an API Call in your app:
  • Add an Action to trigger the API Call based upon a user gesture.
  • Add the API Call as a Backend Query that gets triggered automatically once a user navigates to the page.
You will find the steps for triggering API Calls using either of these two methods in the following pages:
Last modified 1mo ago