Converting JSON maps to list in flutter.
In this article we are going to convert a Map to a List to display in our app from an API. A Map is a collection of key-value pairs. These maybe confusing for those new to programming you can check out this link to learn more.
The source code of this project is available at the end of this article.
Let’s take a look at the sample data below:
The above image shows a Map of currencies which has a class named symbols (not to be confused with the real data) meaning we can only access these data via the class. But how can we access these data and display them as a List in our app? Of course we have to convert them. Let’s go.
IMPLEMENTATIONS
- Create a new flutter project, install http package and save, that is the only package required for this project.
- Create a new repository folder in your lib folder and create a new file currency_repository.dart. This is where we will make our http request to get the raw data as shown in the image below:
From the image above notice how I accessed the JSON data and directly specifying the data type. Let’s proceed.
Mapping the data to the UI
- Create a screen folder in your lib folder and create a new file currency_screen.dart.
- Here we are going to convert the JSON data to a List and display them in our UI as shown below:
Notice am using a stateful widget here to keep things simple but feel free to use external packages of your choice.
Finally let’s display the data in the UI by converting it to a List.
Run the app.
This is my final result.
Congratulations, we have come to the end and I hope you learnt something.
I believe there are different ways to solve a problem and this is just one them so feel free to explore.
Kindly check out the github repo for the source code below:
