3 Ways to Combine Lists in Dart/Flutter

Working with lists is a daily task in Dart and Flutter development. A common operation is combining or merging two or more lists into a single one. While it sounds simple, Dart provides several ways to accomplish this, each with its own advantages and use cases.

Whether you want to create a new list or modify one in place, this guide will cover the best methods to combine lists, helping you write cleaner and more efficient code.

1. The Spread Operator (...)

The spread operator is the most modern, readable, and popular way to combine lists in Dart. It “spreads” the elements of one list into another, creating a new list without modifying the original sources.

This is the go-to method for most use cases because of its clarity and support for immutability.

How It Works

You simply use three dots (...) before the list’s name inside a new list literal ([]).

Code Example

void main() {
  final aTeam = ['Alice', 'Adam'];
  final bTeam = ['Bob', 'Bella'];
  final cTeam = ['Charlie', 'Chloe'];

  // Combine two lists
  final allTeams = [...aTeam, ...bTeam];
  print(allTeams); // Output: [Alice, Adam, Bob, Bella]

  // Combine multiple lists
  final megaTeam = [...aTeam, ...bTeam, ...cTeam];
  print(megaTeam); // Output: [Alice, Adam, Bob, Bella, Charlie, Chloe]

  // You can also add individual elements
  final finalTeam = ['Coach', ...aTeam, 'Manager', ...bTeam];
  print(finalTeam); // Output: [Coach, Alice, Adam, Manager, Bob, Bella]
}

void main() {
  final aTeam = ['Alice', 'Adam'];
  final bTeam = ['Bob', 'Bella'];
  final cTeam = ['Charlie', 'Chloe'];

  // Combine two lists
  final allTeams = [...aTeam, ...bTeam];
  print(allTeams); // Output: [Alice, Adam, Bob, Bella]

  // Combine multiple lists
  final megaTeam = [...aTeam, ...bTeam, ...cTeam];
  print(megaTeam); // Output: [Alice, Adam, Bob, Bella, Charlie, Chloe]

  // You can also add individual elements
  final finalTeam = ['Coach', ...aTeam, 'Manager', ...bTeam];
  print(finalTeam); // Output: [Coach, Alice, Adam, Manager, Bob, Bella]
}

When to Use It

• When you need a new list and want to keep the original lists unchanged (immutability).
• When you want the most readable and concise syntax.
• When combining lists with individual elements.

2. The addAll() Method

The addAll() method is used to add all elements from another list into an existing list. Unlike the spread operator, this method modifies the original list it’s called on.

How It Works

You call addAll() on your primary list and pass the second list as an argument.

Code Example

void main() {
  final techInventory = ['Laptop', 'Mouse'];
  final officeSupplies = ['Pen', 'Notebook'];

  // Add all elements from officeSupplies into techInventory
  techInventory.addAll(officeSupplies);
  
  print(techInventory); // Output: [Laptop, Mouse, Pen, Notebook]
}

void main() {
  final techInventory = ['Laptop', 'Mouse'];
  final officeSupplies = ['Pen', 'Notebook'];

  // Add all elements from officeSupplies into techInventory
  techInventory.addAll(officeSupplies);
  
  print(techInventory); // Output: [Laptop, Mouse, Pen, Notebook]
}

When to Use It

• When you explicitly need to modify an existing list instead of creating a new one.
• When you are working with a list that is part of a state and you want to update it directly (e.g., in state management solutions where you are allowed to mutate state).

3. The followedBy() Method

For more advanced or performance-critical scenarios, Dart offers the followedBy() method. It combines two iterables (lists are iterables) lazily. This means it creates an Iterable object that generates the values on the fly as you iterate over them, which can be more memory-efficient for very large lists.

How It Works

You call followedBy() on the first list and pass the second list. This returns an Iterable, so you must call .toList() if you need a List object.

Code Example

void main() {
  final localData = [1, 2, 3];
  final networkData = [4, 5, 6];

  // followedBy() returns an Iterable
  final combinedIterable = localData.followedBy(networkData);

  // You can iterate over it directly
  for (var item in combinedIterable) {
    print(item); // Prints 1 through 6
  }

  // To get a new list, call toList()
  final combinedList = combinedIterable.toList();
  print(combinedList); // Output: [1, 2, 3, 4, 5, 6]
}

void main() {
  final localData = [1, 2, 3];
  final networkData = [4, 5, 6];

  // followedBy() returns an Iterable
  final combinedIterable = localData.followedBy(networkData);

  // You can iterate over it directly
  for (var item in combinedIterable) {
    print(item); // Prints 1 through 6
  }

  // To get a new list, call toList()
  final combinedList = combinedIterable.toList();
  print(combinedList); // Output: [1, 2, 3, 4, 5, 6]
}

When to Use It

• When working with very large lists where creating a new, combined list in memory all at once could be inefficient.
• When you want to chain multiple list operations together in a functional programming style.

Quick Comparison

Conclusion

Combining lists in Dart is a straightforward task with several powerful options at your disposal.

• For everyday use, the spread operator (...) is your best friend. It’s clean, readable, and promotes immutable patterns.
• Use addAll() when you intentionally need to mutate a list.
• Keep followedBy() in your toolkit for handling large datasets efficiently.