📊

Mengenal Stream Builder di Flutter

May 15, 2025

Catatan Kuliah: Stream Builder dalam Flutter

Pendahuluan

  • Membahas tentang Stream Builder untuk menampilkan data dalam bentuk stream.
  • Rujukan: Video sebelumnya tentang Future Builder.
  • Bagi yang belum paham tentang stream, bisa melihat video PBO D ke-35 (link tersedia di deskripsi).

Pembuatan Class Number Generator

  • Class Number Generator berfungsi untuk menghasilkan bilangan integer secara terus-menerus.

Kode untuk Number Generator

  • Buat file baru: number_generator.dart
  • Berikut adalah kode yang digunakan: Stream<int> numberGenerator() async* { int number = 0; while (true) { await Future.delayed(Duration(seconds: 1)); if (number > 0 && number % 5 == 0) { yield error; // Simulasi error } else { yield number; } number++; } }

Penggunaan Stream Builder di Main Page

  • Bungkus stream number yang dihasilkan dari numberGenerator dengan Stream Builder.

Kode Stream Builder

StreamBuilder<int>( stream: numberGenerator(), builder: (context, snapshot) { if (snapshot.hasError) { return Text( snapshot.error, style: TextStyle(color: Colors.red, fontSize: 24, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ); } if (!snapshot.hasData) { return CircularProgressIndicator(); // Menampilkan animasi loading } return Text('${snapshot.data}'); }, )

Penjelasan Kode

  • Error Handling: Jika terdapat error, tampilkan pesan error.
  • Loading State: Jika belum ada data, tampilkan CircularProgressIndicator.
  • Display Data: Jika ada data, tampilkan angka yang dihasilkan.

Kesimpulan

  • Penjelasan tentang Stream Builder telah selesai.
  • Diharapkan penjelasan ini bermanfaat.
  • Terima kasih dan sampai jumpa.

Full transcript