How To Easily Create And Use Flutter Map List

Flutter map list

In this Flutter post, we will be practically understanding how to create and use Flutter map list. We will first explain how to define a Flutter map then we will be using an easy Flutter example to implement Flutter map list. After reading this post, I am sure that you will be able to easily implement and customize Flutter map list in your own Flutter apps.

So let’s just get right into its implementation.

What is Flutter Map List?

In Flutter we have maps, maps are actually key value pairs in which we store data and specify a key to it. We can then fetch that data using that key. Flutter maps are useful because if its used in a list, then we can take all the values of a specific key with just a few or even one line of code.

We will be using a number of maps in Flutter list, the reason you are reading this post. Don’t worry, we will understand its implementation practically with a proper Flutter example.

Implementing Flutter Map List with Example

First we have to understand how to define Flutter map.

Syntax of Flutter Map

 {
      key1:value,
      key2:value,
    key3:value,
    key4:value
 }
This is how you define a map in Flutter. The curly braces defines the body of map. The comes a key value pair, key should be in string for better understanding, key can be a name like id, name, age etc. Value can be dynamic, it can be a string, integer, double, widget etc.
Now that you know how to define a map, let’s now understand how to make a list of maps and fetch data from it.

Example

First we will create a list of maps. See below code:

List<Map<String,dynamic>> listOfMaps=[
    {
      'id': 54,
      'name': 'Green',
      'color': Colors.green
    },

    {
      'id': 47,
      'name': 'Blue',
      'color': Colors.blue
    }, 

    {
      'id': 35,
      'name': 'Purple',
      'color': Colors.purple
    },
   ];
  • We have used a list with a return type of list of maps having key of string and value of dynamic, it means any type of value can be passed to it.
  • Now in the body of list, we have used only 3 maps to demonstrate its working. We have used dynamic values in it.

Let’s now see how to fetch these values using listview builder. See below steps:

  • We will set the length of list view builder to the length of map list by using listOfMaps.length.
  • We will pass Flutter container widget to that listview and give that container a height, width, some radius to its border to make it circular and a background color.
  • We will also pass a column widget as a child to that container, so we can pass two row widgets to it. First will have a pair of two Flutter text widgets, one of the text widget will get the value from the Flutter map list by using this code
    listOfMaps[index][‘id’].toString(). You can see that we have used the index of listview builder to get every item of the Flutter map list. The value of id is integer which is unacceptable in text widget so we have converted it to string using the toString().
  • Same process to fetch the name from the Flutter map list but use listOfMaps[index][‘name’] to get the name. No need of toString() as the value is already a string.
  • Use listOfMaps[index][‘color’] to change the color of container.

Enough with the boring theory part. Below section has the complete source code in which Flutter map list is practically implemented. The above theory can be seen practically implemented in the below code.

Flutter map list

Conclusion

To conclude, we have practically discussed in depth of how to implement and customize Flutter map list. Hope you now will easily implement and customize Flutter map list in your own Flutter apps. Thank you for reading this post.

Leave a Comment

Your email address will not be published. Required fields are marked *