In this article we are going to add a Model to the api call and perform several other complex concepts.



We have already done with the steps where we have fetched the records with the help of API .

First of all we will make a user.dart file where we have declared some of the fields from the API to be displayed. 



The API structure looks like this 


 

Since the name fields in the API contains multiple fields within it we need to make a seperate class for the same. 

 

After we declare the UserName , We will declare it in the User class as shown in the above fig.


Download code for all of the above : click here



Now, fetchUsers methods needs to be modified to map them in different parameters based on API.



In the homescreen.dart file we will make List<User> type.             
       

In the fetchUsers method we will store all the json response into                    json['results'] as List<dynamic> and  map them into different parameters. 



Lastly in the ListView.builder we will call the fields that we want to display on our app and more over we will make the tilecolor according to their gender . If it is male then the color will be blue and if female the color will be green.



Download full code : click here   (includes ListView and fecthusers)



The final Outputs looks like this : 





Final Thoughts
I hope you find this article helpful and worth it.  Feel free to share it with your developer friend.
Happy Coding 🙌