preface
| category | The keyword | The return type | partner |
|---|---|---|---|
| Multielement synchronization | sync* | Iterable<T> |
Yield, yield * |
| Single element asynchrony | async | Future<T> |
await |
| Multielement asynchrony | async* | Stream<T> |
Yield, yield*, await |
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 code2,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 codeTwo, 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 codeLoad start -- 2020.- 05- 20T07:20:32.156074End of load -- 2020.- 05- 20T07:20:34.175806
π
Copy the codeIii. 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 codeLoad 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 code2.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 codeStreamBuilder -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 code2. 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 codeAn 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 codeThe 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 ~