What does "..." or ".." mean in flutter?

Question

While looking at some code written in flutter, I keep seeing "..." used in different situations, but do not really understand how and why it is used. Here is an example :

 CircleAvatar(
        radius: size / 2,
        child: DragTarget<Animal>(
          builder: (context, candidateData, rejectedData) => Stack(
            children: [
              ...animals
                  .map((animal) => DraggableWidget(animal: animal))
                  .toList(),
              IgnorePointer(child: Center(child: buildText(text))),
            ],
          ),
          onWillAccept: (data) => true,
          onAccept: (data)

Can someone explain it to me ?

Julien Ripet · Accepted Answer · 2021-07-02T14:02:57.903

4

I'm not a Dart developer, so take everything I'm about to say with a grain of salt, but from what I read, the ..., called spread operator behaves in a similar fashion to the Javascript one. It allows you to split collections, set, etc, into its items.

It's especially useful to insert a collection into another, like so

var list = [1, 2, 3];
var list2 = [0, ...list]; 

// list2 contains 0, 1, 2, 3

As for the .., the cascade operator, the answer was quite well explained here

edited Jul 02 '21 at 14:02

answered Jul 02 '21 at 13:57

Julien Ripet

430
3
12

Thanks a lot for your help. I got the "cascade operator" fine. For the Spread operator, I don't really understand how to use it, in which concrete situation I need to use it... But I will try to research on it as I now know what it is called. – SylvainJack Jul 02 '21 at 14:06
@SylvainJack Here are some links explaining the spread operator with examples 1. https://stackoverflow.com/a/55822127/9414608 2. https://www.woolha.com/tutorials/dart-using-triple-dot-spread-operator-examples 3.https://medium.com/flutter-community/simple-and-bug-free-code-with-dart-operators-2e81211cecfe – Youssef Hegab Jul 02 '21 at 14:10
@SylvainJack the spread operator is the same as `list2 = [0]; list2.insertAll(1, list)`. It's just a different way of doing it. – osaxma Jul 02 '21 at 14:11
Thanks a lot everyone !! In the example that I copied in my question, why do we use it there in the "CHILDREN" section of the Stack ? – SylvainJack Jul 02 '21 at 14:20
1

You are officially a Dart developer now! – Peter Haddad Jul 02 '21 at 14:21
@SylvainJack It's just a preferred way than writing this: `children: animals.map((animal) => DraggableWidget(animal: animal)).toList().insert(animals.length, IgnorePointer(child: Center(child: buildText(text)))),` – osaxma Jul 02 '21 at 14:24
Ah ok I see !! Thanks !! I have another question :) While reading the link you sent me, I saw in the MEDIA.COM article an example that I don't really understand. Here is the code : "final addressBook = (AdressBookBuilder()..name = 'jenny'..email='jenny@ex.com').build(); Why do we use the "...builder() and /Build()" What is it for ? – SylvainJack Jul 02 '21 at 14:29
@Peter Haddad :) Thanks :) but just a beginner :) but wanting to learn a lot !! :) – SylvainJack Jul 02 '21 at 14:30
@SylvainJack The `AddressBookBuilder()` and `build()` are just methods that the author use. The cascade operator in the simplest form, is just used so you don't have to write the same object multiple times. For example with cascade operator: `var paint = Paint(); paint.color = Colors.black; paint.strokeCap = StrokeCap.round; paint.strokeWidth = 5.0;` and without `var paint = Paint() ..color = Colors.black ..strokeCap = StrokeCap.round ..strokeWidth = 5.0;` (https://dart.dev/guides/language/language-tour#cascade-notation) – Peter Haddad Jul 02 '21 at 14:36
Thanks ! That's crystal clear ! And the fact that he ends this allocation with .build() ? do you see what it can be ? – SylvainJack Jul 02 '21 at 14:40
@SylvainJack its just a custom method, I think they are showcasing the builder design pattern with the cascade operator, this is the pattern in java though: (https://howtodoinjava.com/design-patterns/creational/builder-pattern-in-java/) – Peter Haddad Jul 02 '21 at 14:54
I saw in your profile that you were very knowledgeable in FIREBASE FIRESTORE etc... I use FIREBASE & FIRESTORE in my app. Everything works fine, however, when building the app, I get a lot of NOTES in red saying "Firebase uses deprecated APIs" etc.... RECOMPILE with Xlint etc.... Is this a bug with the package ? – SylvainJack Jul 02 '21 at 16:06

What does "..." or ".." mean in flutter?

1 Answers1