317

Sometimes I see this List list = [];

Then list..add(color)

What's the difference between using 1 dot(.) and 2 dot(..)?

MendelG
  • 14,885
  • 4
  • 25
  • 52
Daniel Mana
  • 9,451
  • 13
  • 29
  • 41

5 Answers5

502

.. is known as cascade notation. It allows you to not repeat the same target if you want to call several methods on the same object.

List list = [];
list.add(color1);
list.add(color2);
list.add(color3);
list.add(color4);

// with cascade

List list = [];
list
  ..add(color1)
  ..add(color2)
  ..add(color3)
  ..add(color4);
Alexandre Ardhuin
  • 71,959
  • 15
  • 151
  • 132
  • 6
    Just to clarify as this left me confused and I iterated a few times before grasping the concept: There are two variants of the cascade operator at the time of writing. Namely .. and ..? Do not confuse with ... and ...? which are different and called the spread operator in Dart. While spread operator ... and ...? is for list/collection, cascade .. and ..? can be called on any type of object not just list. (The example code above uses list but could use another object like with a controller for instance). Also spread and cascade do entirely different things. – Alexandre Jean Jun 17 '21 at 06:04
156

It's the cascade operator of Dart

var l1 = new List<int>()..add(0)..addAll([1, 2, 3]);

results in l1 being a list [0, 1, 2, 3]

var l1 = new List<int>().add(0).addAll([1, 2, 3]);

results in an error, because .add(0) returns void

.. (in the former example) refers to new List(), while . (in the later) refers to the return value of the previous part of the expression.

.. was introduced to avoid the need to return this in all kinds of methods like add() to be able to use an API in a fluent way.

.. provides this out of the box for all classes.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Referring `.. (in former example) refers to new List()`, do you mean we are again creating a new `List` when we are using `..` in my opinion NO. I got confused by your `new` word, is it really NEW or you are talking about `new` keyword here. – CopsOnRoad Oct 07 '18 at 12:22
  • First `new` is now optional. `..` refers to the list returned by `new List()` and allows to call multiple methods on it like `add(0)` `addAll(...)` without repeating `l1.` and it is the created list instance that is assigned to `l1`, **not** the return value of the last method in the chain (`addAll(...)`). Does this answer your question? – Günter Zöchbauer Oct 07 '18 at 12:25
  • 1
    Absolutely! I know `new` is optional beginning with Dart 2.0, I just got confused by the `new` in above context and thanks for your explanation. – CopsOnRoad Oct 07 '18 at 13:08
  • @GünterZöchbauer `var l2 = l1..add(5)..add(6);` is valid, but why `l1..add(5).add(6);` is not valid? I meant why we can't use single . on for last function in the chain? – Johnykutty Mar 06 '19 at 12:06
  • 1
    `..add(6)` is like `l1.add(6)`, `.add(6)` is like `l1.add(5).add(6)`. `add(5)` returns `void` and you can't call `add()` on `void` – Günter Zöchbauer Mar 06 '19 at 15:31
  • 2
    follow this document: - https://www.dartlang.org/guides/language/language-tour#cascade-notation- Strictly speaking, the “double dot” notation for cascades is not an operator. It’s just part of the Dart syntax. – Mr Special Apr 27 '19 at 16:35
  • @MrSpecial so you did downvote my answer because there exists a document on the internet that explains this in more detail or is there another reason? – Günter Zöchbauer Apr 27 '19 at 17:02
  • yep, simply it's not an operator, it's Dart's syntax. although you r corrected in the next explaination the first sentence is not – Mr Special Apr 28 '19 at 13:21
  • https://newbedev.com/list-use-of-double-dot-in-dart – Davoud Oct 01 '21 at 16:06
43

Cascades (..) allow you to make a sequence of operations on the same object. read doc for details

querySelector('#confirm') // Get an object.
  ..text = 'Confirm' // Use its members.
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed!'));

The previous example is equivalent to:

var button = querySelector('#confirm');
button.text = 'Confirm';
button.classes.add('important');
button.onClick.listen((e) => window.alert('Confirmed!'));
Mohsin AR
  • 2,998
  • 2
  • 24
  • 36
  • 1
    thanks for this example! any idea why `..onClick` does not translate to `button.classes.onClick`? – Bouke Versteegh Jan 27 '20 at 18:13
  • Thank you for using assignments in your examples. Being new to Dart, I've read a little on the double dot notation, but thought it was just for chaining void methods. – Keith DC Aug 06 '20 at 20:57
13

Double dots(..) also know as cascade operator

It allows you to not repeat the same target if you want to call several methods on the same object.

e.g without double dots

var paint = Paint();
paint.color = Colors.black;
paint.strokeCap = StrokeCap.round;
paint.strokeWidth = 5.0;

But after using “..”, the above code will be written like this:

var paint = Paint()
..color = Colors.black
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;

Triple dots(…) i.e. Spread Operator

“… ”also known as spread operator which provide a concise way to insert multiple values into a collection. You can use this to insert all the elements of a list into another list:

Normally we use .add() or .addAll() to add data to the list like:

var list = [1, 2, 3];
var list2=[];
list2.addAll(list);

After using “…” we will write code like this:

var list = [1, 2, 3];
var list2 = [0, ...list];
Enough Technology
  • 645
  • 8
  • 12
8

.. Is known as the cascading operator in dart.

It allows you to use more than one subsequence operation:

Examples:

banerad..load()..show(). 

List coursename;
coursename..add("java")..add("flutter" )..add("dart");

Here is another example

Here is another example

L_J
  • 2,351
  • 10
  • 23
  • 28
Raushan Jha
  • 111
  • 3
  • 3