In this Flutter post, we will see how to create and use Flutter map. We will be using a simple but proper Flutter example to understand what Flutter map is and how to properly use it in Flutter app.
After reading this article, you will be able to easily add Flutter maps in your Flutter apps. So let’s just dive into it.
What is Flutter Map?
Flutter map is used to store same or different type of data in one place. It consists of key value pairs. We can use the key to get the specific value assigned to it. It is very helpful in a list of maps in which you define same type of key in all maps and fetch its value using just that key.
Don’t worry, we’ll understand everything practically. First we will see how the syntax of Flutter map looks like, then we will implement it using a proper code. So let’s start implementing it with a practical Flutter example code.
Syntax of Flutter Map
Map<keyType,valueType> nameOfMap = {key: value, key: value, key: value};- First we have to use the Map keyword as a return type. We can specify the type of key and value inside the angle brackets like mentioned in the above code.
- Then comes the name of the Map.
- The curly brackets specify the body of map.
- In Map, we have a key value pair(separated by colon(:)). Key can be of any type like string, integer etc. Also the value can be of any type but if you specify their type in the return type then you have to the key values of only that type. String type is recommended for the key.
As you now know the syntax of Flutter map, let’s now pass some real data in it and fetch that data.
Implementing Flutter Map
We’ll first create a map in Flutter and pass it some values. Then we’ll fetch values from that map.
Define A Flutter Map
Map<String, dynamic> mapItems = {
'name':'Zeeshan Ali',
'postalCode': 22500,
'nationality': 'Pakistan',
'city': 'Havelian'
};Fetch Data From Flutter Map
In order to fetch data from this map, we will first use a Flutter column widget and inside that we will use a list of Flutter text widgets so we can see this whole data vertically. If you want, you can take only some specify value as well. See below code:
Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(mapItems['name']), Text(mapItems['postalCode'].toString()), Text(mapItems['nationality']), Text(mapItems['city']), ], )
Flutter Map Implementation Complete 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> {
Map<String, dynamic> mapItems = {
'name': 'Zeeshan Ali',
'postalCode': 22500,
'nationality': 'Pakistan',
'city': 'Havelian'
};
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Container(
constraints: BoxConstraints(maxHeight: 120),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 2,
blurRadius: 8,
offset: Offset(2, 2))
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
mapItems['name'],
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
Text(
mapItems['postalCode'].toString(),
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
Text(
mapItems['nationality'],
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
Text(
mapItems['city'],
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
],
),
),
)));
}
}Conclusion
In conclusion, hope you now have a compete knowledge of how to practically define and use Flutter map. Do share your experience with it using the comment section. Thank you for reading this post.
