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 ?

Answer 1

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

Answer 2

(..) Cascade Operator

The two dots (..) in the expression SomeClass()..someMethos(locale) are the cascade operator in Dart. It allows you to perform multiple method calls on the same object in a single line of code.

Why use Cascade Operator?

Readability: When chaining multiple method calls on the same object, the cascade operator improves readability by avoiding repetition of the object reference.

Conciseness: It allows you to write a more concise expression compared to separate lines for object creation and method calls.

Example:

final languageProvider = LanguageProvider()..setLocale(locale);

// Alternative without Cascade Operator:

final languageProvider = LanguageProvider();
languageProvider.setLocale(locale);

(...) Spread operators

Spread operators evaluate an expression that yields a collection, unpacks the resulting values, and inserts them into another collection.

1. Copying a List:

// Create a list of numbers
List<int> numbers = [1, 2, 3];

// Create a new list with the spread operator
List<int> newNumbers = [...numbers, 4, 5];

print(numbers); // Output: [1, 2, 3]
print(newNumbers); // Output: [1, 2, 3, 4, 5]

2. Combining Lists:

// List of fruits
List<String> fruits1 = ['apple', 'banana'];

// List of vegetables
List<String> vegetables = ['carrot', 'potato'];

// Combine them using spread operator
List<String> allProduce = [...fruits1, ...vegetables];

print(allProduce); // Output: [apple, banana, carrot, potato]

3. Modifying a List (with caution):

// List of numbers
List<int> numbers = [1, 2, 3];

// Attempt to modify the original list (not recommended)
numbers = [...numbers, 4]; // This modifies the original list

print(numbers); // Output: [1, 2, 3, 4]

4. Using Spread Operator with Maps:

/ Define a user profile
Map<String, String> profile = {
  'name': 'John Doe',
  'age': '30',
};

// Create a new map with additional information
Map<String, String> fullProfile = {
  ...profile,
  'city': 'New York',
};

print(profile); // Output: {name: John Doe, age: 30}
print(fullProfile); // Output: {name: John Doe, age: 30, city: New York}

5. Spread Operator with Null-aware Safety:

// User object with a potentially null address
class User {
  String name;
  String? address; // Address might be null

  User(this.name, this.address);
}

// Create a User object
User user = User('Alice', null);  

// Spread operator with null-awareness
Map<String, String> userData = {
  'name': user.name,
  'address': user.address?, // Only include address if it's not null
};

print(userData); // Output: {'name': Alice} (address is omitted)