Flutter - Implement map() Method
Last Updated :
23 Jul, 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 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 - 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 - 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
State management using Redux in Flutter State management is a crucial aspect of building dynamic and responsive applications. While building applications, we sometimes need to maintain a state between multiple screens. Here comes the part of State Management. There are different state management techniques in Flutter like GetX, Provider,
6 min read
Flutter - Implement a ListTile Inside a GrdiView In this article, we are going to combine two major flutter widgets. We are going to implement a ListTile inside a GridView. Also, we are going to see the basic syntaxes of the individual widgets. A sample Image is given below to get an idea about what we are going to do in this article. Basic Syntax
4 min read