Dart/Flutter: How to Convert Map to/from List of Objects

Dart/Flutter: How to Convert Map to/from List of Objects

In Dart or Flutter Maps and List are predefined data structure types used to store collections.

The map contains key and value pairs of elements The list contains a collection of elements.

Automatic conversion is not possible from Map to List or List to Map.

We have to manually convert from Map to List or vice versa.

There are multiple ways to convert from Map to List.

For example, Let’s create an Employee Class

class Employee {
  final int id;
  final String name;
  final int salary;
  final DateTime joinDate;

  Employee(this.id, this.name, this.salary, this.joinDate);
  @override
  String toString() {
    return '{id: ${id}, name: ${name}}';
  }

  Map<String, dynamic> toJson() =>
      {"id": id, "name": name, "salary": salary, "doj": joinDate.toString()};
}

Let’s create Map<int, Employee> and add some data to it.

import 'dart:convert';

class Employee {
  final int id;
  final String name;
  final int salary;
  final DateTime joinDate;

  Employee(this.id, this.name, this.salary, this.joinDate);
  @override
  String toString() {
    return '{id: ${id}, name: ${name}}';
  }

  Map<String, dynamic> toJson() =>
      {"id": id, "name": name, "salary": salary, "doj": joinDate.toString()};
}

void main() {
  final e1 =
      Employee(11, 'Erwin', 9000, DateTime.parse("2020-06-21 00:00:00.000"));
  final e2 =
      Employee(21, 'Andrew', 70000, DateTime.parse("2021-07-23 00:00:00.000"));
  final e3 =
      Employee(4, 'Mark', 8000, DateTime.parse("2017-08-24 00:00:00.000"));
  final e4 =
      Employee(12, 'Otroc', 5000, DateTime.parse("2022-12-05 00:00:00.000"));

  final Map<int, Employee> employees = {
    e1.id: e1,
    e2.id: e2,
    e3.id: e3,
    e4.id: e4
  };

  print(employees);
}

Output:

{11: {id: 11, name: Erwin}, 21: {id: 21, name: Andrew}, 4: {id: 4, name: Mark}, 12: {id: 12, name: Otroc}}

Next, see how we can convert Map to a List of keys and values.

How to Convert Map of objects into List in Flutter and dart?

The map contains key and value pairs, So we can convert keys and values into a List.

Convert Map of values to List of objects example

Map.values property returns the Iterable class, Convert it to List using toList() Employees map contains values of Employee Type, hence it returns List<Employee> type

  var listValues = employees.values.toList();
  print(listValues);
  print(listValues.runtimeType);
[{id: 11, name: Erwin}, {id: 21, name: Andrew}, {id: 4, name: Mark}, {id: 12, name: Otroc}]
JSArray<Employee>

Convert Map of Key to List of elements example

Map.values property returns the Iterable class, Convert it to List using toList() Employees map contains keys of int Type, hence it returns int type

  var listKeys = employees.keys.toList();
  print(listKeys);
  print(listKeys.runtimeType);
[11, 21, 4, 12]
JSArray<int>

How to Convert List of objects into Map in Flutter and dart?

There are multiple ways we can convert to List from Map.

First way, Map.fromIterable() method iterates and creates a key and values from a list.

  var result = Map.fromIterable(employees,
      key: (element) => element.id, value: (element) => element);
  print(
      result); //{11: {id: 11, name: Erwin}, 21: {id: 21, name: Andrew}, 4: {id: 4, name: Mark}, 12: {id: 12, name: Otroc}}
  print(result.runtimeType); // JsLinkedHashMap<dynamic, dynamic>

It returns Map<dynamic, dynamic> and it is not recommended due to type safety.

The second way, using the collection for

  var result1 = {for (var value in employees) value.id: value};
  print(
      result1); //{11: {id: 11, name: Erwin}, 21: {id: 21, name: Andrew}, 4: {id: 4, name: Mark}, 12: {id: 12, name: Otroc}}

  print(result1.runtimeType); //JsLinkedHashMap<int, Employee>

It returns the exact type Map<int, Employee>, Which is the recommended way to do it.

You can check more ways to convert List to Map

Here is a complete example code

import 'dart:convert';

class Employee {
  final int id;
  final String name;
  final int salary;
  final DateTime joinDate;

  Employee(this.id, this.name, this.salary, this.joinDate);
  @override
  String toString() {
    return '{id: ${id}, name: ${name}}';
  }

  Map<String, dynamic> toJson() =>
      {"id": id, "name": name, "salary": salary, "doj": joinDate.toString()};
}

void main() {
  final e1 =
      Employee(11, 'Erwin', 9000, DateTime.parse("2020-06-21 00:00:00.000"));
  final e2 =
      Employee(21, 'Andrew', 70000, DateTime.parse("2021-07-23 00:00:00.000"));
  final e3 =
      Employee(4, 'Mark', 8000, DateTime.parse("2017-08-24 00:00:00.000"));
  final e4 =
      Employee(12, 'Otroc', 5000, DateTime.parse("2022-12-05 00:00:00.000"));

  List<Employee> employees = [e1, e2, e3, e4];

  print(employees); //
  var result = Map.fromIterable(employees,
      key: (element) => element.id, value: (element) => element);
  print(
      result); //{11: {id: 11, name: Erwin}, 21: {id: 21, name: Andrew}, 4: {id: 4, name: Mark}, 12: {id: 12, name: Otroc}}

  print(result.runtimeType); // JsLinkedHashMap<dynamic, dynamic>

  var result1 = {for (var value in employees) value.id: value};
  print(
      result1); //{11: {id: 11, name: Erwin}, 21: {id: 21, name: Andrew}, 4: {id: 4, name: Mark}, 12: {id: 12, name: Otroc}}

  print(result1.runtimeType); //JsLinkedHashMap<int, Employee>
}

Conclusion

To summarize shows multiple ways to convert List to map and map to list with examples.