Sync * and async*, yield and yield*, async and await

preface

Here are a few emoji to get to know these keywords

Multi-element synchronization function generator

1. sync* 和 yield

Sync * is a DART syntax keyword. It annotates that before the function {, its methods must return an Iterable

object

The code for 👿 is \u{1f47f}. Here’s how to generate the last 10 Emoji Iterable objects using sync*

main() {
  getEmoji(10).forEach(print);
}

可迭代<String> getEmoji(int count) sync* {
  Runes first = Runes('\u{1f47f}');
  for (int i = 0; i < count; i++) {
    yield String.fromCharCodes(first.map((e) => e + i)); }}Copy the code

👿
💀
💁
💂
💃
💄
💅
💆
💇
💈
Copy the code

2,sync* 和 yield*

Who is yield*? Remember that the expression after yield* is an Iterable

object

GetEmoji (count).map((e)); getEmoji(count).map(e); getEmoji(count); getEmoji(count); Is an Iterable Iterable

main() {
  getEmojiWithTime(10).forEach(print);
}

可迭代<String> getEmojiWithTime(int count) sync* {
  yield* getEmoji(count).map((e) => '$e -- ${DateTime.now().toIso8601String()}');
}

可迭代<String> getEmoji(int count) sync* {
  Runes first = Runes('\u{1f47f}');
  for (int i = 0; i < count; i++) {
    yield String.fromCharCodes(first.map((e) => e + i)); }}Copy the code

👿 -2020- 05- 20T07:01:07.163407💀 -2020- 05- 20T07:01:07.169451💁 -2020- 05- 20T07:01:07.169612💂 -2020- 05- 20T07:01:07.169676💃 -2020- 05- 20T07:01:07.169712💄 -2020- 05- 20T07:01:07.169737💅 -2020- 05- 20T07:01:07.169760💆 -2020- 05- 20T07:01:07.169789💇 -2020- 05- 20T07:01:07.169812💈 -2020- 05- 20T07:01:07.169832
Copy the code

Two, asynchronous processing:asyncandawait

Async is a DART syntax keyword. It is annotated before the function {whose method must return a Future

object

For time-consuming operations, which are typically handled asynchronously with Future

objects, the fetchEmoji method below simulates 2s loading time

main() {
  print('Program open --${DateTime.now().toIso8601String()}');
  fetchEmoji(1).then(print);
}

Future<String> fetchEmoji(int count) async{
  Runes first = Runes('\u{1f47f}');
  await Future.delayed(Duration(seconds: 2));// The simulation takes time
  print('Loading finished --${DateTime.now().toIso8601String()}');
  return String.fromCharCodes(first.map((e) => e + count));
}
Copy the code

Load start -- 2020.- 05- 20T07:20:32.156074End of load -- 2020.- 05- 20T07:20:34.175806
💀
Copy the code

Iii. Multi-element asynchronous function generator

1.async*andyield,await

Async * is a DART syntax keyword. It indicates that before the function {, its method must return a Stream

object

FetchEmojis are labeled async*, so they must return Stream objects. Note that functions labeled async* can use the yield, yield, and await keywords inside them

main() {
  fetchEmojis(10).listen(print);
}

Stream<String> fetchEmojis(int count) async* {for (int i = 0; i < count; i++) {
    yield await fetchEmoji(i);
  }
}

Future<String> fetchEmoji(int count) async{
  Runes first = Runes('\u{1f47f}');
  print('Loading begins --${DateTime.now().toIso8601String()}');
  await Future.delayed(Duration(seconds: 2));// The simulation takes time
  print('Loading finished --${DateTime.now().toIso8601String()}');
  return String.fromCharCodes(first.map((e) => e + count));
}
Copy the code

Load start -- 2020.- 05- 20T07:28:28.394205End of load -- 2020.- 05- 20T07:28:30.409498👿 Load starts -- 2020.- 05- 20T07:28:30.416714End of load -- 2020.- 05- 20T07:28:32.419157💀 Load starts -- 2020.- 05- 20T07:28:32.419388End of load -- 2020.- 05- 20T07:28:34.423053💁 Load starts -- 2020.- 05- 20T07:28:34.423284End of load -- 2020.- 05- 20T07:28:36.428161💂 Load starts -- 2020.- 05- 20T07:28:36.428393End of load -- 2020.- 05- 20T07:28:38.433409💃 Load starts -- 2020.- 05- 20T07:28:38.433647End of load -- 2020.- 05- 20T07:28:40.436491💄 Load starts -- 2020.- 05- 20T07:28:40.436734End of load -- 2020.- 05- 20T07:28:42.440696💅 Load starts -- 2020.- 05- 20T07:28:42.441255End of load -- 2020.- 05- 20T07:28:44.445558💆 Load starts -- 2020.- 05- 20T07:28:44.445801End of load -- 2020.- 05- 20T07:28:46.448190💇 Load starts -- 2020.- 05- 20T07:28:46.448432End of load -- 2020.- 05- 20T07:28:48.452624
💈
Copy the code

2.async*andyield*,await

As with yield* above, yield* is used in async* methods, and the following object must be a Stream

object

The following getEmojiWithTime is used to map the fetchEmojis flow, with yield* added

main() {
  getEmojiWithTime(10).listen(print);
}

Stream<String> getEmojiWithTime(int count) async* {
  yield* fetchEmojis(count).map((e) => '$e -- ${DateTime.now().toIso8601String()}');
}

Stream<String> fetchEmojis(int count) async* {for (int i = 0; i < count; i++) {
    yield await fetchEmoji(i);
  }
}

Future<String> fetchEmoji(int count) async{
  Runes first = Runes('\u{1f47f}');
  await Future.delayed(Duration(seconds: 2));// The simulation takes time
  return String.fromCharCodes(first.map((e) => e + count));
}
Copy the code

👿 -2020- 05- 20T07:35:09.461624💀 -2020- 05- 20T07:35:11.471223💁 -2020- 05- 20T07:35:13.476712💂 -2020- 05- 20T07:35:15.482848💃 -2020- 05- 20T07:35:17.489429💄 -2020- 05- 20T07:35:19.491214💅 -2020- 05- 20T07:35:21.497086💆 -2020- 05- 20T07:35:23.500867💇 -2020- 05- 20T07:35:25.505379💈 -2020- 05- 20T07:35:27.511723
Copy the code

StreamBuilder -StreamBuilder

The most common Stream component is The StreamBuilder. The core of a StreamBuilder component is that it accepts a Stream object,

Build different interfaces based on the Builder function in different states of the flow elements.

1. Top component

import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar(), body: HomePage(), )); }}Copy the code

2. Use of the StreamBuilder component

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { Stream<String> _stream; @override void initState() { super.initState(); _stream= fetchEmojis(10); } @override Widget build(BuildContext context) { return Center( child: StreamBuilder<String>( builder: _buildChildByStream, stream: _stream, ), ); } Widget _buildChildByStream( BuildContext context, AsyncSnapshot<String> snapshot) { switch(snapshot.connectionState){ case ConnectionState.none: break; case ConnectionState.waiting: return CircularProgressIndicator(); break; case ConnectionState.active: return Text(snapshot.requireData,style: TextStyle(fontSize: 60)); break; case ConnectionState.done: return Text('Stream Over--${snapshot.requireData}',style: TextStyle(fontSize: 30),); break; } return Container(); } Stream<String> fetchEmojis(int count) async* { for (int i = 0; i < count; i++) { yield await fetchEmoji(i); } } Future<String> fetchEmoji(int count) async { Runes first = Runes('\u{1f47f}'); await Future.delayed(Duration(seconds: 1)); Return String. FromCharCodes (first.map((e) => e + count)); }}Copy the code

An aside:

If you’ve used Flutter_bloc, async* will be used, so let’s see if it’s a little clearer.

class CounterBloc extends Bloc<CounterEvent, int> { @override int get initialState => 0; @override Stream<int> mapEventToState(CounterEvent event) async* { switch (event) { case CounterEvent.decrement: yield state - 1; break; case CounterEvent.increment: yield state + 1; break; }}}Copy the code

The end of the

Welcome to Star and pay attention to the development of FlutterUnit. Let’s join hands and become a member of Unit.

In addition, I have a Flutter wechat communication group. You are welcome to join and share the knowledge of Flutter. I look forward to exchanging ideas with you.

@ZhangFengjietele 2020.05.20 not allowed to transfer

My official number: King of programming contact me – email :[email protected] – wechat :zdl1994328 ~ END ~