Meaning of Triple Dots [...] in Flutter Syntax

Question

Can someone please clarify what is the meaning and usage of "..." in Flutter?

I wanted to learn about "triple dots" used in Flutter syntax. After some reading I found out that the word I was looking for was "spreading".

Widget _build() {
  List<Widget> children = [
    Text("first child"),
    Text("second child"),
    Text("third child"),
  ];

  return Column(
    children: <Widget>[
      ...children,
      Text("fourth child"),
    ],
  );
}

If I didn't have the ... right before the children, it will give an error The element type 'List<Widget>' can't be assigned to the list type 'Widget'.

I just thought that someone should post a question about it. What is "..." in flutter syntax? What does it mean?

Answer 1

Dart 2.3 introduced the spread operator (...) and the null-aware spread operator (...?), which provide a concise way to insert multiple elements into a collection.

For example, you can use the spread operator (...) to insert all the elements of a list into another list:

var list = [1, 2, 3];
var list2 = [0, ...list];
assert(list2.length == 4);

If the expression to the right of the spread operator might be null, you can avoid exceptions by using a null-aware spread operator (...?):

var list;
var list2 = [0, ...?list];
assert(list2.length == 1);

For more details and examples of using the spread operator, see the spread operator proposal.