Flutter - Implement map() Method
Last Updated :
24 Apr, 2025
In Flutter, the map() method is used to transform and manipulate the elements of a collection (such as a List, Set, or Iterable) and produce a new collection with the transformed values. It allows you to apply a function to each element of the collection and create a new collection based on the results of those transformations. In this article, we are going to first create a List of Map (i.e. List<Map<String, String>>) that contains the Country name followed by its capital name then we use map( ) to display each country name and its capital name using a ListTile.
Basic Syntax of map( ) in Flutter
Iterable<T> map<T>(T Function(E element) f)
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: MapMethodExample(),
);
}
}
Step 5: Create MapMethodExample Class
In this class we are going to first create a List of maps(List<Map<String,String>>).
// Define a list of maps containing country and capital information.
final List<Map<String, String>> countriesData = [
{"country": "India", "capital": "New Delhi"},
{"country": "USA", "capital": "Washington, D.C."},
{"country": "Canada", "capital": "Ottawa"},
{"country": "Germany", "capital": "Berlin"},
{"country": "France", "capital": "Paris"},
{"country": "Japan", "capital": "Tokyo"},
];
Then we going to iterate over each map inside the list using map() method in flutter then we are going to display each country name and their capital name by using ListTile in Flutter. Comments are added for better understanding.
ListView(
children: countriesData.map((countryInfo) {
final String? country = countryInfo['country'];
final String? capital = countryInfo['capital'];
return ListTile(
title: Text(country!),
subtitle: Text('Capital: $capital'),
);
}).toList(),
),
Dart
class MapMethodExample extends StatelessWidget {
// Define a list of maps containing
// country and capital information.
final List<Map<String, String>> countriesData = [
{"country": "India", "capital": "New Delhi"},
{"country": "USA", "capital": "Washington, D.C."},
{"country": "Canada", "capital": "Ottawa"},
{"country": "Germany", "capital": "Berlin"},
{"country": "France", "capital": "Paris"},
{"country": "Japan", "capital": "Tokyo"},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Set the app bar title
title: Text('map() Method Example'),
),
body: ListView(
children: countriesData.map((countryInfo) {
final String? country = countryInfo['country'];
final String? capital = countryInfo['capital'];
return ListTile(
title: Text(country!),
subtitle: Text('Capital: $capital'),
);
}).toList(),
),
);
}
}
Here is the full Code of main.dart file:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: MapMethodExample(),
);
}
}
class MapMethodExample extends StatelessWidget {
// Define a list of maps containing
// country and capital information
final List<Map<String, String>> countriesData = [
{"country": "India", "capital": "New Delhi"},
{"country": "USA", "capital": "Washington, D.C."},
{"country": "Canada", "capital": "Ottawa"},
{"country": "Germany", "capital": "Berlin"},
{"country": "France", "capital": "Paris"},
{"country": "Japan", "capital": "Tokyo"},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Set the app bar title
title: Text('map() Method Example'),
),
body: ListView(
children: countriesData.map((countryInfo) {
final String? country = countryInfo['country'];
final String? capital = countryInfo['capital'];
return ListTile(
title: Text(country!),
subtitle: Text('Capital: $capital'),
);
}).toList(),
),
);
}
}
Output:
-768.jpg)
Similar Reads
Implementing Rest API in Flutter
Along with building a UI in Flutter, we can also integrate it with the backend. Most applications use APIs to display user data. We will use the http package, which provides advanced methods to perform operations. REST APIs use simple HTTP calls to communicate with JSON data because:It uses await
5 min read
Flutter - Implement a Simple VideoPlayer
To implement a simple video player in Flutter, you can use the video_player package, which allows you to play videos from various sources. In this article, we are going to see a step-by-step procedure to implement a VideoPlayer in a Flutter App. A sample video is given below to get an idea about wha
3 min read
Flutter - Implement IndexedStack Widget
The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It's commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and expl
5 min read
Flutter - State Management
In a reactive framework like Flutter, you can think of your UI as the function's return value. The function here is considered as your state. So in simple words, what a user sees in the application is one state, and he clicks on the button, he sees another UI screen. So now that screen is a state. S
5 min read
Flutter - Implementing Badges
Badges can be used for various purposes in an application. For example, showing the number of messages, number of items in the cart, etc. In this article, we will see the implementation of badges in Flutter using the badges Flutter package. Install the library: In the pubspec.yaml file, add badges l
5 min read
Flutter - How to Integrate Mapbox
Maps have become an aspect of our routines. Whether you're exploring a city looking for a coffee shop or keeping tabs on delivery maps is incredibly valuable. When it comes to creating apps incorporating maps not only improves the user experience but is also frequently necessary, for applications th
7 min read
Flutter - State Management Provider
In this article, we are going to learn how state management is achieved in Flutter using providers. But before that, we need to know what a state is. As we know that everything in Flutter is a widget, and there are mainly two kinds of widgets: Stateless Widgets and Stateful Widgets. Stateless widget
8 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. Â How to use it?Dart GridPaper(
3 min read
Flutter - Load Images with image.file
In this article, we will learn how to show file images in Flutter. There is an image widget available in Flutter. In that, you may have to use Image.network, Image.asset, Image.memory. But have you used Image.file? Maybe you have used it. If not then Let's learn about this. Sometimes we have to show
4 min read
Tab Page Selector Widget in Flutter
This article will teach about Tab Page Selector Widget in a flutter. What is Tab Page Selector Widget?TabPageSelector displays a row of small circular indicators, one per tab. Tabpageselector is a crucial part of the TabBar, which functions distinctly.   It plays a major role in increasing the user
4 min read