How To Easily Create And Use Flutter Map – Easy Flutter Guide

flutter map

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};
As you can see in the above code:
  • 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'
    };
As you can see that we now have a map of multiple key value pairs. We have specified the type of key to be string and dynamic to the value. You can see that we have used string and integer in our values, you can use other types as well if you want.

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
You can see that by using this syntax mapName[keyName], we can easily fetch value from the Flutter Map. Just make sure that use the same key name.
So this is how you can easily create and fetch values from the map in Flutter. I hope you now have a compete idea of how to use Flutter Maps.
If you want to learn how to properly use Flutter Maps in list then click here. I have written a detailed blog on it as well.
The complete source code in which Flutter map is implemented is available in the below section.

Flutter Map Implementation Complete Source Code

flutter map

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.

Leave a Comment

Your email address will not be published.