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

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.


spread operator (...) is used to provide a way to assign values to Collections, more commonly it found inside the column to render its child.

List<String> values = ['one', 'two', 'three'];
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ...values.map((value) {
              return Text(value);
            }),
          ],
        ),
      ),
    );

Output:

enter image description here


I used to have this problem. I solved this problem by adding .toList(); to the List Widget.

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

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

Hope it helps

Tags:

Syntax

Flutter