How to join or combine two lists in dart/flutter?

Lists are used to store multiple items using Flutter/Dart. If you have multiple lists and you want to merge them then you can use the code examples explained in this post.

List<String> _fruits = ["apple", "banana"];
List<String> _vegetables = ["Potato", "carrot"];

_fruits.addAll(_vegetables); //This will join the list

print(_fruits)

Output

["apple", "banana", "Potato", "carrot"]

To concatenate or join two lists in dart or Flutter you can use .addAll() method. In the code snippet, we have defined two lists _fruits and _vegetables and we concatenate them.

Create a new list by Joining two list

If you do not want to merge the lists in the given list and want to create a new list that is the combination of two lists then you can use the below code. 

Code Example

  List companyList1 = ['Microsoft', 'Apple'];
  List companyList2 = ['Devsheet', 'Tesla'];
  
  // Create a new list by joining the above lists
  List allCompanies = List.from(companyList1)..addAll(companyList2);
  
  print(allCompanies);

Output

['Microsoft', 'Apple', 'Devsheet', 'Tesla']

Join two lists using extend() function

You can also use the extend() function of Dart to join two or multiple lists. Here we pass all the lists variable to a list and use extend() method with it.

Code Example

  List companyList1 = ['Microsoft', 'Apple'];
  List companyList2 = ['Devsheet', 'Tesla'];
  List companyList3 = ['SpaceX'];
  
  var allCompanies = [companyList1, companyList2, companyList3].expand((i) => i).toList();
  print(allCompanies);

Output

['Microsoft', 'Apple', 'Devsheet', 'Tesla', 'SpaceX']

Concatenate multiple lists using + operator

In Dart, + operator also can be used to join two or multiple lists. You just need to place + operator between the lists and assign the result to a dart variable.

Syntax

List finalList = List1 + List2 + List3;

Code Example

List nameList1 = ['Rick', 'Carol'];
List nameList2 = ['Daryl', 'Negan'];
List nameList3 = ['Carl'];
  
List finalList = nameList1 + nameList2 + nameList3;
  
print(finalList);

Output

['Rick', 'Carol', 'Daryl', 'Negan', 'Carl']

Concatenate multiple lists using … operator

You can use … operator in dart or Flutter to join two or multiple lists. All you need to do is to place … operator before the list variable name and pass them to a list.

Syntax

List finalList = [...List1, ...List2, ...List3]

Code Example

List nameList1 = ['Rick', 'Carol'];
List nameList2 = ['Daryl', 'Negan'];
List nameList3 = ['Carl'];

List finalList = [...nameList1, ...nameList2, ...nameList3];

print(finalList);

Output

['Rick', 'Carol', 'Daryl', 'Negan', 'Carl']

Dart/Flutter – Combine Multiple Lists Examples

In this tutorial, have these two Lists that will be combined into one.

final List<int> a = [1, 2, 3];final List<int> b = [4, 5];

Using Concatenation Operator

Dart’s List class has a concatenation operator, which uses + symbol. It returns the concatenation result of a List with another one. This operator doesn’t modify any of the original List.

  List<E> operator +(List<E> other);

Example:

finalList<int> c = a + b;print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using Spread Operator

Dart has spread (triple dot) operator which can be used for joining multiple Lists. Like the + operator, the result is a new List and it doesn’t modify any of the original List.

finalList<int> c = <int>[...a, ...b];print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using expand Method

Dart’s Iterable has expand operator, which is used to expand each element of the Iterable to one or more elements. Each element will run through the function passed as the toElements argument.

The idea is to create a List of Lists, where the elements of the outer List are the Lists to be combined. Then, flatten it by using the expand operator with an identity function passed as the toElements argument. That results in an Iterable which can be converted to a new List using toList() method.

  Iterable<T> expand<T>(Iterable<T> toElements(E element))

Example:

finalList<int> c = [a, b].expand((x) => x).toList();print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using reduce Method

Another method of the Iterable class that you can use is reduce. It’s used to reduce a collection to a single value by iteratively combining elements using the provided function. The provided function has two positional arguments. The first one is value which is the accumulated value. The second one is element which is the current element value. It has to return a value which will be passed as the value argument when processing the next element.

Like using the expand method, you need to create a List of Lists. Then, call the reduce method by passing a function that concatenates the current List to the accumulated value.

  E reduce(E combine(E value, E element))

Example:

finalList<int> c = [a, b].reduce((value, element) => value + element);print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using fold Method

The fold method of the Iterable class is similar to the reduce method. The difference is it requires you to pass an initial value as the first argument, while the function for combining the elements becomes the second argument. Therefore, you can use it to combine multiple Lists as well.

  T fold<T>(T initialValue, T combine(T previousValue, E element))

Example:

finalList<int> c = [a, b].fold([], (previousValue, element) => previousValue + element);print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using followedBy Method

The followedBy method returns the lazy concatenation of an Iterable and another one. It returns an Iterable whose elements are the same as the Iterable that invokes the method, followed by the elements of the Iterable passed as the argument in the same order. The result is an Iterable which can be converted to a List using the toList method.

  Iterable<E> followedBy(Iterable<E> other)

Example:

finalList<int> c = a.followedBy(b).toList();print(a); // [1, 2, 3]print(b); // [4, 5]print(c); // [1, 2, 3, 4, 5]

Using addAll Method

The addAll method is used to append all objects a passed Iterable to the end of the List. It modifies the List that calls the method.

  void addAll(Iterable<E> iterable);

Example:

a.addAll(b);  print(a); // [1, 2, 3, 4, 5]  print(b); // [4, 5]

If you don’t want to modify the elements of the original List, you can copy the List first and call addAll using the cascade notation.

  final List<int> c = List.from(a)..addAll(b);