Handling GET APIs in Flutter: From JSON Response to Beautiful UI

mohammadfaisal (78)Steem-Atlas Ambassadorin Steem For Pakistan • yesterday

Hello everyone!

Today I am here to share with you how we can handle GET APIs in flutter. I will explore the creation of the model from the API response and then using it to get response and displaying it on the screen.

Designed with ^Canva

It has been a difficult and confusing work handling APIs and getting response from APIs and using it in the applications. Today I will show you how we can use an API which gives response in the form of an array and in the array there are a a number of json objets.

I will handle the json response and after decoding we will use it in the application to display the data. I will try to explain different examples as I get time. Today I will explain with some sample APIs from JSONPlaceholder.

At this website these resources are available to play and use as a practice. I will use some from here to show you how we can make model and access data. Most of the response type of these resources is same but with increased complexity.

Posts

I am using posts url which returns different posts with some attributes.

https://jsonplaceholder.typicode.com/posts

I am using postman to get the response from the API. As soon as I have paste the link and hit the SEND button it got some loading time and it returned a response. The response is an array where the name of the array is not defined and on each index of array there is an object which contains a json response.

Each object has 4 attributes:

userId
id
title
body

I have copied the response of the API as I got from postman. I have a plugin in Android Studio which is Json To Dart. It helps to create the model from the response of the API automatically. I have pasted the response in the plug in file and given it a name PostsModel.

The model has been created for the API response which will make it easy to access the data from the API. It has included all the attributes available in the response of API in the model. Now I will pass data to the screen using this model.

To fetch the response from the API we need to have http package imported in the file after adding it in the pubspec.yaml file. It helps to send requests to the API. It is necessary to import the model for the API which we have created recently.

Here you can see to access the data from the API model I have created a list and a future function. The list postsList will include all the posts obtained from the model.

As the API takes some time to load and return the data so I have used a future function. I have used a final variable response and using http I am fetching data from the API endpoint and saving the data in the response variable.

Then I am decoding data from the response and storing the response body as a string in the variable data.

Then I have applied a condition to check if the response received from the API is valid or not. It checks if the response from the API return statusCode 200 then it is valid response. In this regard the response obtained from the data is added to the empty list created earlier using a for loop. It maps the data in the list from the json response returned by the model. At the end I have returned the list which now contains data.

This is the body code which helps to display the fetched data on the screen. I have used a column widget as the parent. I have used expanded widget so that the list of items can be displayed easily and can occupy the space that is required for the data. The data becomes scrollable.

I have used Futurebuilder widget and passed getPosts() future function to its property of future. Then I have implemented different conditions to check the availability of the data to capture the run time errors and to display the data when it is available.

I have created a variable posts and I stored response data of the index of array. Then I am using this variable to access the remaining attributes such as id, title, body of the posts API.

Finally here you can see the response from the API related to the posts available in this API on the screen. I have displayed the data in the card widget. Inside the card I have used ListTile where I have used a id as leading, title as title and subtitle description of the post.

The main purpose of this lecture was to fetch data from the API and display it on the screen by creating a model of the API when the name of the array is not available and on each index there are objects. Note here there are a number of objects in the array. But if there is only one object then we use a bit different approach.

I have used some style elements to make the screen look beautiful. I have circular avatar in the leading to display the id of the post which is unique for each post. I have changed the app bar title as well and make it centered and of white colour. I have used gradient colour for the app bar and body of the screen.

What we have learnt?