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 – Sort list of Objects
– Dart/Flutter Constructors tutorial with examples
– Dart/Flutter String Methods & Operators tutorial with examples
– Dart/Flutter Future Tutorial with Examples
– Dart/Flutter List Tutorial with Examples
– Dart/Flutter Map Tutorial with Examples
Contents
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
– Dart/Flutter – Sort list of Objects
Happy Learning! See you again.
Further Reading
– Dart/Flutter Constructors tutorial with examples
– Dart/Flutter String Methods & Operators tutorial with examples
– Dart/Flutter Future Tutorial with Examples
Very good Dart article.
Great tutorial – perfectly clear!
So good, I spotted you have it the wrong way around in the “Conclusion” !?
Thanks! Please do keep up the awesome work and tutorials.
I am sure this post has touched all the internet users, its really
really good Tutorial. Thanks!
If you’re lazy like me and don’t want to do a for loop, or want to convert the map to a map of another type, another way to convert a list to a map:
In this case it is returning a Map but could be Map.
Output:
Thanks a lot! Your tutorial is very comprehensive.
Like!! Great article post. Really thank you! Really Cool.
Thank you for the tutorial!
What about List, how would you convert that to a Map?
Hi, the tutorial also shows way to do this. You can check it again.
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 🙂