API call in Flutterflow with custom widget
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 its 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 is in REST with JSON format as this is the most predominant specification now.
List of APIs Method
GET, POST,DELETE,PUT,PATCH
API headers
API headers are like an extra source of information for each API call you make. Their job is to represent the meta-data associated with an API request and response.
If you ever encounter issues with an API, the first place you should look is the headers, since they can help you track down any potential issues. This makes them a very important part of each request.
API Headers tell you about:
- Request and Response Body
- Request Authorization
- Response Caching
- Response Cookies
I have used http://api.weatherapi.com/v1/current.json with GET method & Passed query parameters as well
Here we can test API response in flutterflow
API Key: https://www.weatherapi.com/ you have to create an account
For information: https://docs.flutterflow.io/data-and-backend/api-calls
Resonse Body:
{
“location”: {
“name”: “Saint-Merri”,
“region”: “Ile-de-France”,
“country”: “France”,
“lat”: 48.86,
“lon”: 2.35,
“tz_id”: “Europe/Paris”,
“localtime_epoch”: 1660225431,
“localtime”: “2022–08–11 15:43”
},
“current”: {
“last_updated_epoch”: 1660224600,
“last_updated”: “2022–08–11 15:30”,
“temp_c”: 32,
“temp_f”: 89.6,
“is_day”: 1,
“condition”: {
“text”: “Sunny”,
“icon”: “//cdn.weatherapi.com/weather/64x64/day/113.png”,
“code”: 1000
},
“wind_mph”: 17.4,
“wind_kph”: 28.1,
“wind_degree”: 70,
“wind_dir”: “ENE”,
“pressure_mb”: 1018,
“pressure_in”: 30.06,
“precip_mm”: 0,
“precip_in”: 0,
“humidity”: 23,
“cloud”: 0,
“feelslike_c”: 29.8,
“feelslike_f”: 85.6,
“vis_km”: 10,
“vis_miles”: 6,
“uv”: 8,
“gust_mph”: 11.9,
“gust_kph”: 19.1,
“air_quality”: {
“co”: 166.89999389648438,
“no2”: 1.7999999523162842,
“o3”: 125.9000015258789,
“so2”: 1.2999999523162842,
“pm2_5”: 8.300000190734863,
“pm10”: 9,
“us-epa-index”: 1,
“gb-defra-index”: 1
}
}
}
Custom Widget :
Using our Custom Widget editor, you can write/modify the widget code or upload it directly in the UI editor. FlutterFlow also allows you to define parameters that can be used to update the custom widget. You can compile and preview the custom widget right in the UI builder.
Creating a custom widget
- Click on the Custom Function from the Navigation Menu (left side of your screen)
- Select the Custom Widgets tab
- Click on the + Create button. This is will open a new popup window.
More details : https://docs.flutterflow.io/customizing-your-app/custom-widgets
Here I have created a custom widget with requires this dependency : syncfusion_flutter_gauges: ^20.2.40 to showcase air quality with index
Click on Preview
Here I have called Temperature API with parameters
This custom function for showing temperature value
Result :
I have created an example for the GET API call & Custom widget to display air quality with types (Good, Moderate, Unhealthy for Sensitive Groups, Unhealthy, Very Unhealthy, Hazardous) and Custom function to display temperature value.
