Flutter – Implement map() Method

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: