流与响应式数据
学习如何在 Flutter 中使用 Dart 流处理持续的异步数据，例如实时更新、套接字和响应式界面。
流与响应式数据 是 CoddyKit 上的免费 Flutter Mobile Development 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Beyond a Single Future
A Future gives you one value later. A Stream gives you many values over time.
- WebSocket messages
- Sensor readings
- Live database updates
Streams are the reactive backbone of async Dart.
Listening to a Stream
Subscribe to a stream with listen, supplying callbacks for data, errors and completion.
stream.listen(
(data) => print('Got: ' + data.toString()),
onError: (e) => print('Error: ' + e.toString()),
onDone: () => print('Done'),
);Creating Streams with async*
An async generator uses async* and yield to emit values.
Stream<int> countTo(int n) async* {
for (var i = 1; i <= n; i++) {
await Future.delayed(const Duration(seconds: 1));
yield i;
}
}await for
Inside an async function you can iterate a stream with await for, processing each value as it arrives.
Future<void> run() async {
await for (final value in countTo(3)) {
print(value);
}
}Single vs Broadcast
A single-subscription stream allows one listener. A broadcast stream allows many. Convert with asBroadcastStream().
final broadcast = controller.stream.asBroadcastStream();
broadcast.listen((v) => print('A: ' + v.toString()));
broadcast.listen((v) => print('B: ' + v.toString()));StreamController
A StreamController lets you push values into a stream from your own code.
final controller = StreamController<String>();
controller.add('hello');
controller.add('world');
controller.close();Transforming Streams
Streams have functional operators like map, where and take.
stream
.where((n) => n.isEven)
.map((n) => n * 10)
.take(5)
.listen(print);StreamBuilder Widget
In the UI, StreamBuilder rebuilds whenever the stream emits a new value.
StreamBuilder<int>(
stream: countTo(5),
builder: (context, snapshot) {
if (!snapshot.hasData) return const CircularProgressIndicator();
return Text('Value: ' + snapshot.data.toString());
},
);Reading the Snapshot
The AsyncSnapshot tells you the connection state and whether data or an error is present.
snapshot.connectionStatesnapshot.hasData/snapshot.datasnapshot.hasError/snapshot.error
if (snapshot.hasError) return Text('Error: ' + snapshot.error.toString());Cancelling Subscriptions
Always cancel subscriptions in dispose to avoid memory leaks.
late StreamSubscription sub;
@override
void dispose() {
sub.cancel();
super.dispose();
}Backpressure & Errors
Streams can emit errors mid-flow. Handle them with handleError so one bad event does not kill the whole pipeline.
stream
.handleError((e) => print('Skipped: ' + e.toString()))
.listen(print);Quick Check
Which widget rebuilds your UI automatically as a stream emits new values?
Recap
You learned to work with Streams:
- async* / yield and StreamController to create them
- map / where / take to transform
- StreamBuilder to drive reactive UI
- Cancelling subscriptions and handling errors
Streams let your app react to continuous async data in real time.
常见问题解答
「流与响应式数据」课时是免费的吗？
是的 — 「流与响应式数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。
「流与响应式数据」这节课中我会学到什么？
学习如何在 Flutter 中使用 Dart 流处理持续的异步数据，例如实时更新、套接字和响应式界面。 你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Flutter Mobile Development 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「流与响应式数据」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Flutter Mobile Development 课中编写并运行代码吗？
能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。