Streams und reaktive Daten
Lernen Sie, mit Dart Streams in Flutter kontinuierliche asynchrone Daten wie Live-Updates und Socket-Daten für eine reaktive UI zu verarbeiten.
Streams und reaktive Daten ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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.
Häufig gestellte Fragen
Ist die Lektion „Streams und reaktive Daten“ kostenlos?
Ja — der vollständige Text von „Streams und reaktive Daten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Streams und reaktive Daten“?
Lernen Sie, mit Dart Streams in Flutter kontinuierliche asynchrone Daten wie Live-Updates und Socket-Daten für eine reaktive UI zu verarbeiten. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Flutter Mobile Development zu starten?
Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Streams und reaktive Daten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?
Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Futures und Async/Await
- HTTP-Anfragen und JSON
- Fehlerbehandlung in asynchronem Code
- Streams und reaktive Daten