How to Iterate through Map Values in Dart/Flutter

This post will teach you how to iterate or loop through Map keys and values in Dart or Flutter. To go through a map is very important while reading API data or any data. See the example below to loop through the hashmap in Flutter.

Method 1: Using forEach:

Map values = {
    "a":"Elephant",
    "b":"Horse",
    "c":"Lion",
    "d":"Deer"
};

values.forEach((index, value) {
    print("$index - $value");
});

/* OUTPUT -------
    I/flutter ( 2970): a - Elephant
    I/flutter ( 2970): b - Horse
    I/flutter ( 2970): c - Lion
    I/flutter ( 2970): d - Deer
*/ 

Method 2: Using for in Entries:

Map values = {
    "a":"Elephant",
    "b":"Horse",
    "c":"Lion",
    "d":"Deer"
};

for (var item in values.entries) {
    print(item.key);
    print(item.value);
} 
/* OUTPUT ----------
    I/flutter ( 2970): a
    I/flutter ( 2970): Elephant
    I/flutter ( 2970): b
    I/flutter ( 2970): Horse
    I/flutter ( 2970): c
    I/flutter ( 2970): Lion
    I/flutter ( 2970): d
    I/flutter ( 2970): Deer
*/ 

Iterate Through List of Maps:

List<Map> capitals = [
    {"name":"Nepal", "capital":"Kathmandu"},
    {"name":"India", "capital":"New Delhi"},
    {"name":"Sri Lanka", "capital":"Colombo"},
];


//Method One ---------------------------
capitals.forEach((element) {
    print(element["name"]);
    print(element["capital"]);
});

/* OUTPUT -----------
    I/flutter ( 2970): Nepal
    I/flutter ( 2970): Kathmandu
    I/flutter ( 2970): India
    I/flutter ( 2970): New Delhi
    I/flutter ( 2970): Sri Lanka
    I/flutter ( 2970): Colombo
*/ 


//Method Two -------------------------------
for(var i = 0;i< capitals.length;i++){
  var element = capitals[i];
  print(element["name"]);
  print(element["capital"]);
}
/* OUTPUT ----------------
  I/flutter ( 2970): Nepal
  I/flutter ( 2970): Kathmandu
  I/flutter ( 2970): India
  I/flutter ( 2970): New Delhi
  I/flutter ( 2970): Sri Lanka
  I/flutter ( 2970): Colombo
*/ 


//Method Three --------------------------
capitals.forEach((element) {
    element.forEach((index, value) {
        print("$index - $value");
    }); 
});

/* OUTPUT --------
    I/flutter ( 2970): name - Nepal
    I/flutter ( 2970): capital - Kathmandu
    I/flutter ( 2970): name - India
    I/flutter ( 2970): capital - New Delhi
    I/flutter ( 2970): name - Sri Lanka
    I/flutter ( 2970): capital - Colombo
*/ 

You can also populate children in widgets like Column, and Row like below:

Map values = {
    "a":"Elephant",
    "b":"Horse",
    "c":"Lion",
    "d":"Deer"
};

Column(
  children: [
    for(var element in values.entries) ...[
        ListTile(
            title: Text("KEY:" + element.key),
            subtitle: Text("VALUE:" + element.value),
        )
    ]  
  ],
)

Full App Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    Map values = {
       "a":"Elephant",
       "b":"Horse",
       "c":"Lion",
       "d":"Deer"
    };

    return  Scaffold(
          appBar: AppBar(
            title: Text("Loop through Map"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
             child: Column(
               children: [
                  for(var element in values.entries) ...[
                      ListTile(
                         title: Text("KEY:" + element.key),
                         subtitle: Text("VALUE:" + element.value),
                      )
                  ]  
               ],
             ),
          )
       );
  }
}

Output Screenshot:

In this way, you can Iterate or loop through map or list of map in Dart or Flutter.