Question #173EasyDart Basics

What is spread operator ?

Answer

Overview

The spread operator (

text
...
for non-nullable,
text
...?
for nullable) in Dart inserts all elements of a collection into another collection, making collection building concise.


Basic Spread in Lists

dart
final first = [1, 2, 3];
final second = [4, 5, 6];

// Combine lists with spread
final combined = [...first, ...second];
print(combined); // [1, 2, 3, 4, 5, 6]

// Spread with additional elements
final all = [0, ...first, ...second, 7, 8];
print(all); // [0, 1, 2, 3, 4, 5, 6, 7, 8]

Null-Aware Spread (...?)

dart
List<String>? extras = null;
final safe = ['apple', ...?extras, 'banana'];
// extras is null -- inserted as nothing
print(safe); // [apple, banana]

// With value
extras = ['cherry', 'mango'];
final withExtras = ['apple', ...?extras, 'banana'];
print(withExtras); // [apple, cherry, mango, banana]

Spread in Maps

dart
final defaults = {'theme': 'dark', 'fontSize': 14};
final overrides = {'fontSize': 18, 'language': 'en'};

// Merge maps -- later keys override earlier ones
final config = {...defaults, ...overrides};
print(config); // {theme: dark, fontSize: 18, language: en}

Spread in Flutter Widgets

dart
// Combining widget lists dynamically
Widget build(BuildContext context) {
  final baseItems = [
    ListTile(title: Text('Home')),
    ListTile(title: Text('Profile')),
  ];

  final adminItems = [
    ListTile(title: Text('Settings')),
    ListTile(title: Text('Manage Users')),
  ];

  return ListView(
    children: [
      ...baseItems,
      if (currentUser.isAdmin) ...adminItems, // Conditional spread
    ],
  );
}

Spread with Collection If and For

dart
// Collection if + spread
final items = [
  'always',
  if (isAdmin) ...['admin1', 'admin2'],  // Spread conditionally
  'always last',
];

// Collection for + spread
final tags = ['flutter', 'dart'];
final links = [
  for (final tag in tags) ...[
    Header(tag),
    Content(tag),
  ]
];

Spread vs addAll

dart
final a = [1, 2, 3];
final b = [4, 5, 6];

// addAll -- mutates existing list
final list = [...a];
list.addAll(b); // Mutates list

// Spread -- creates new list (immutable-friendly)
final newList = [...a, ...b]; // New list, original unchanged

Best Practice: Use spread (

text
...
) for declarative collection building in Flutter widget trees -- pairs perfectly with
text
if
and
text
for
in collection literals.