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,}
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 codelistOfMaps[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.
In the meantime, if you like this post or if you have any questions related to the implementation or customization of Flutter map list, then do let me know in the comment section. I would love to answer.
Flutter Map List Implementation Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
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},
];
return SafeArea(
child: Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: listOfMaps.length,
itemBuilder: (context, index) {
return Container(
height: 100,
width: 100,
margin: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: listOfMaps[index]['color'],
borderRadius: BorderRadius.circular(10)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ID: ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text(
listOfMaps[index]['id'].toString(),
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Name: ',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text(
listOfMaps[index]['name'],
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
],
),
);
}))));
}
}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. Do comment your valuable feedback on this post. Thank you for reading this post.
