dart-flutter-convert-list-map-feature-image

Dart/Flutter – Convert Map to List & List to Map

In this tutorial, we’re gonna look at several ways to convert Map to List & List to Map in Dart/Flutter using List & Map methods.

Related Posts:
Dart/Flutter List Tutorial with Examples
Dart/Flutter Map Tutorial with Examples


Overview

Assume that we have a model class like this.

class Customer {
  String name;
  int age;

  Customer(this.name, this.age);

  @override
  String toString() {
    return '{ ${this.name}, ${this.age} }';
  }
}

What we’ll do is to convert List<Customer> into Map and vice versa as below.

  • key: Customer’s name
  • value: Customer’s age
// List of Customers
[{ Jack, 23 }, { Adam, 27 }, { Katherin, 25 }]

// Map { name:age }
{Jack: 23, Adam: 27, Katherin: 25}

Let’s go to the next sections.

Convert Map to List in Dart/Flutter

Let’s initialize a Dart Map first.

Map map = {'Jack': 23, 'Adam': 27, 'Katherin': 25};

We will convert this Map to List<Customer> with Customer.name from a key and Customer.age from a value.
Before that, initialize an empty list first.

var list = [];

Using Map forEach() method

Now we convert our Map to List above using forEach() method.

map.forEach((k, v) => list.add(Customer(k, v)));
print(list);

In the code above, we create a new Customer object from each key-value pair, then add the object to the list.

Output:

[{ Jack, 23 }, { Adam, 27 }, { Katherin, 25 }]

Using Iterable forEach() method

We can also convert a Dart Map to List using Iterable forEach() method instead.

map.entries.forEach((e) => list.add(Customer(e.key, e.value)));
print(list);

We apply forEach() to entries property of the map.
Every entry has a key-value field, we use them to create a new Customer object and add to the list.

Output:

[{ Jack, 23 }, { Adam, 27 }, { Katherin, 25 }]

Using Iterable map() method

Another way to convert Map to a Dart List is to use Iterable map() method.

list = map.entries.map((e) => Customer(e.key, e.value)).toList();
print(list);

Each entry item of Map’s entries will be mapped to a Customer object with entry.key as customer.name and entry.value as customer.age.
Then we convert the Iterable result to List using toList() method.

Output:

[{ Jack, 23 }, { Adam, 27 }, { Katherin, 25 }]

Convert List to Map in Dart/Flutter

Before doing our work, we create a List with some items.

List list = [];
list.add(Customer('Jack', 23));
list.add(Customer('Adam', 27));
list.add(Customer('Katherin', 25));

Using Map.fromIterable()

We convert List<Customer> into Map using fromIterable() constructor.

var map1 = Map.fromIterable(list, key: (e) => e.name, value: (e) => e.age);
print(map1);

We pass list as an Iterable for the first param.
Then, for each element of the iterable, the method computes key and value respectively.

Output:

{Jack: 23, Adam: 27, Katherin: 25}

Using Iterable forEach() method

We can convert Dart List to Map in another way: forEach() method.

var map2 = {};
list.forEach((customer) => map2[customer.name] = customer.age);
print(map2);

This method is simple to understand.
We iterate over the list, for each item in the list, we add an entry (key,value) to the Map.

Output:

{Jack: 23, Adam: 27, Katherin: 25}

Conclusion

Today we’ve known how to convert a Map to List in Dart/Flutter using Map.fromIterable() or Iterable forEach() method. We also do the opposite thing: convert a List to Map using Map.forEach(), Iterable forEach() or map() method.

For more details about these methods, also many interesting thing about Dart List and Map, please visit:
Dart/Flutter List Tutorial with Examples
Dart/Flutter Map Tutorial with Examples

Happy Learning! See you again.

Further Reading

One thought to “Dart/Flutter – Convert Map to List & List to Map”

  1. We’re a group of engineers and starting a new scheme in our community. Your site offered us with valuable Dart & Flutter tutorial. Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *