Stream dan Data Reaktif
Pelajari cara bekerja dengan Stream Dart di Flutter untuk menangani data asinkron berkelanjutan seperti pembaruan langsung, soket, dan UI reaktif.
Stream dan Data Reaktif adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Stream dan Data Reaktif” gratis?
Ya — teks lengkap “Stream dan Data Reaktif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Stream dan Data Reaktif”?
Pelajari cara bekerja dengan Stream Dart di Flutter untuk menangani data asinkron berkelanjutan seperti pembaruan langsung, soket, dan UI reaktif. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Stream dan Data Reaktif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Future dan Async/Await
- Permintaan HTTP dan JSON
- Penanganan Error dalam Operasi Asinkron
- Stream dan Data Reaktif