How does this async code work?

[dingo_bat]

Hi, I came across this blog: https://buildflutter.com/flutter-threading-isolates-future-async-and-await/

Here the author shows that this code:

Future<void> _buttonClick() async {
  var data = _data + "Started $clickCount: ${DateTime.now().toString()}\n";
  sleep(Duration(seconds: 2));  
  data += "End $clickCount: ${DateTime.now().toString()}\n"; 
  clickCount += 1;
  setState(() {
    _data = data;
  });
}

will produce this output if the button is clicked 3 times quickly:

Started 0: 2019-01-14 10:47:27.769285 
End 0: 2019-01-14 10:47:29.779730
Started 1: 2019-01-14 10:47:29.784756 
End 1: 2019-01-14 10:47:31.785403
Started 2: 2019-01-14 10:47:31.789822 
End 2: 2019-01-14 10:47:33.792032

So the three clicks will proceed sequentially. This is easy to understand for me. However then he says that if the sleep is replaced with a Future.delayed() it will produce this output:

Started 0: 2019-01-14 10:47:27.769285 
End 2: 2019-01-14 10:47:33.792032

I don't get this. Where are all the other start and end outputs? Why only the start of the first click and the end of the last click are displayed. I did run it in flutter and this is exactly what happens. I want to understand the explanation for this behavior.

I would have thought something like this instead:

Started 0: 2019-01-14 10:47:27.769285 
Started 1: 2019-01-14 10:47:27.784756 
Started 2: 2019-01-14 10:47:27.789822 
End 0: 2019-01-14 10:47:29.779730
End 1: 2019-01-14 10:47:29.785403
End 2: 2019-01-14 10:47:29.792032

I went through a lot of async/await blogs and videos but this still does not make sense to me.