Setting up API Calls
Last updated
Last updated
On this page, you will learn the most basic knowledge on various concepts for adding an API call to your project. They are the building blocks of adding an API call. Depending on the API's definition, you may utilize some or all of these concepts to successfully implement the API call in your project.
They are:
Api response to data type
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 the client requesting the resource.
Response headers hold additional information about the response that the server returns.
Some of the common request headers that you might need while sending a request are:
Authorization: Used for authenticating the request.
Content-Type: Used while sending a POST/PUT/PATCH request containing a message body.
To pass the request header:
Select the Headers tab and click on the Add Header button.
Inside the input box, enter the key followed by its value (e.g., Content-Length: application/json).
You might need to add an API that is secured. That means it only gives results if you pass the authorization token (aka auth token) in the header parameter. This is usually done to prevent abuse. Let's see how you can add the auth token.
Some services provide you with a static auth token. Such a token never changes until you manually generate the new one.
To pass the static auth token:
Select the Headers tab and click on the Add Header button.
Inside the input box, enter the key such as Authorization followed by its value (e.g., Authorization: Bearer YOUR_TOKEN).
They are optional parameters you can pass with an API call; they help format 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.
Here, start_date, end_date, and api_key are the query parameters passed to receive the specific data.
Variables allow you to pass the dynamic values from any part of your app to the API calls. Here's when they come in handy:
Sending an auth token from your app's state to an API call's request header.
Using username and password from TextField widgets in the API call's request body.
Including selected dates as query parameters.
Changing the base URL with a dynamic URL.
To create variables, select the Variables tab.
Enter its Name, select the appropriate Type and provide the Default Value if you wish to.
Now you can pass values to these variables while triggering the API call from your page. You can set its value from any widget, or any other source.
You can send data (as a request body) while calling the API of methods POST, PUT, or PATCH by defining them inside Body. The most common type is JSON format which is the easiest way of passing data inside the body of the request.
Here you'll see creating a request body in the following formats:
To create a request body in JSON format:
Select the Body tab and set the Body dropdown to JSON.
Define your request body.
Let's see how to fetch data from the following json below
First you need to configure your Future Builder Widget
1.Choose API in type
2.Choose your Api in Data source
3.Add a relevant widget like text widget in your Future Builder Widget
4Make your Text widget dynamic and use response.body.title to fetch the title of the Json
dot (
.) is used for accessing keys present inside the JSON
the whole data of the Json is retrieved through response.body
Similarly we can fetch the other values of the json data by following the above method
An example of an URL with query parameters looks like this ():
Here's another example, this API call has two query parameters. The limit parameter specifies 20 items to load per page, and the offset specifies the number of items to skip. This is called offset-based pagination.
First, If you haven't already, (e.g., username and password variables that will be required to pass values from a login page to the login API call).
