Terakhir diperbarui: 21 November 2024

Penulis: Habibie Ed Dien

Pada codelab ini, Anda akan mempelajari tentang streams dan BLoC di Flutter beserta contoh penggunaannya. Cara kerja, manfaat, dan cara mengelola state lebih lanjut.

Video berikut menjelaskan tentang apa itu Streams dan BLoC serta bagaimana manfaatnya terhadap pengelolaan state. Silakan simak dan pahami!

Tujuan Praktikum

Setelah menyelesaikan codelab ini Anda akan mampu untuk:

Sumber Daya yang Dibutuhkan

Berikut merupakan sumber daya yang diperlukan untuk menyelesaikan praktikum ini:

Pengetahuan yang Anda harus Miliki

Di Dart dan Flutter, future dan stream merupakan tool utama untuk melakukan pemrograman asynchronous. Future merepresentasikan single value yang diterima di waktu yang akan datang, sedangkan Stream adalah sebuah set (sequence) yang bisa memiliki nilai 0 atau lainnya dikirim secara asinkronus secara terus-menerus. Intinya, Stream merupakan aliran data yang dikirim terus-menerus.

Untuk mendapatkan data dari Stream, Anda harus melakukan subscribe (listen). Setiap kali data itu diterima, Anda mendapatkan data tersebut dan dapat dimanipulasi sesuai kebutuhan aplikasi.

Pada codelab ini, Anda akan fokus bekerja dengan berbagai studi kasus pada stream di Flutter. Anda akan menggunakan stream dengan berbagai skenario berbeda, cara menulis dan membaca data ke stream, membangun UI berdasarkan stream, dan menggunakan pola BLoC untuk state management.

Seperti halnya Future, stream juga dapat menghasilkan data atau error, sehingga Anda akan melakukan praktikum seperti halnya Future di pekan lalu.

Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda (ketik di README.md) pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buat Project Baru

Buatlah sebuah project flutter baru dengan nama stream_nama (beri nama panggilan Anda) di folder week-12/src/ repository GitHub Anda.

Langkah 2: Buka file main.dart

Ketiklah kode seperti berikut ini.

Langkah 3: Buat file baru stream.dart

Buat file baru di folder lib project Anda. Lalu isi dengan kode berikut.

Langkah 4: Tambah variabel colors

Tambahkan variabel di dalam class ColorStream seperti berikut.

Langkah 5: Tambah method getColors()

Di dalam class ColorStream ketik method seperti kode berikut. Perhatikan tanda bintang di akhir keyword async* (ini digunakan untuk melakukan Stream data)

Langkah 6: Tambah perintah yield*

Tambahkan kode berikut ini.

yield* Stream.periodic(
  const Duration(seconds: 1), (int t) {
    int index = t % colors.length;
    return colors[index];
});

Langkah 7: Buka main.dart

Ketik kode impor file ini pada file main.dart

import 'stream.dart';

Langkah 8: Tambah variabel

Ketik dua properti ini di dalam class _StreamHomePageState

Langkah 9: Tambah method changeColor()

Tetap di file main, Ketik kode seperti berikut

Langkah 10: Lakukan override initState()

Ketika kode seperti berikut

Langkah 11: Ubah isi Scaffold()

Sesuaikan kode seperti berikut.

Langkah 12: Run

Lakukan running pada aplikasi Flutter Anda, maka akan terlihat berubah warna background setiap detik.

Langkah 13: Ganti isi method changeColor()

Anda boleh comment atau hapus kode sebelumnya, lalu ketika kode seperti berikut.

StreamControllers akan membuat jembatan antara Stream dan Sink. Stream berisi data secara sekuensial yang dapat diterima oleh subscriber manapun, sedangkan Sink digunakan untuk mengisi (injeksi) data.

Secara sederhana, StreamControllers merupakan stream management. Ia akan otomatis membuat stream dan sink serta beberapa method untuk melakukan kontrol terhadap event dan fitur-fitur yang ada di dalamnya.

Anda dapat membayangkan stream sebagai pipa air yang mengalir searah, dari salah satu ujung Anda dapat mengisi data dan dari ujung lain data itu keluar. Anda dapat melihat konsep stream pada gambar diagram berikut ini.

Di Flutter, Anda dapat menggunakan StreamController untuk mengontrol aliran data stream. Sebuah StreamController memiliki sebuah properti bernama sink yang berguna untuk insert data. Sedangkan properti stream berguna untuk menerima atau keluarnya data dari StreamController tersebut.

Setelah Anda menyelesaikan praktikum 1, Anda dapat melanjutkan praktikum 2 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Pada codelab ini, kita akan menambah kode dari aplikasi stream di praktikum sebelumnya.

Langkah 1: Buka file stream.dart

Lakukan impor dengan mengetik kode ini.

import 'dart:async';

Langkah 2: Tambah class NumberStream

Tetap di file stream.dart tambah class baru seperti berikut.

Langkah 3: Tambah StreamController

Di dalam class NumberStream buatlah variabel seperti berikut.

Langkah 4: Tambah method addNumberToSink

Tetap di class NumberStream buatlah method ini

Langkah 5: Tambah method close()

Langkah 6: Buka main.dart

Ketik kode import seperti berikut

Langkah 7: Tambah variabel

Di dalam class _StreamHomePageState ketik variabel berikut

Langkah 8: Edit initState()

Langkah 9: Edit dispose()

Langkah 10: Tambah method addRandomNumber()

void addRandomNumber() {
  Random random = Random();
  int myNum = random.nextInt(10);
  numberStream.addNumberToSink(myNum);
}

Langkah 11: Edit method build()

Langkah 12: Run

Lakukan running pada aplikasi Flutter Anda, maka akan terlihat seperti gambar berikut.

Langkah 13: Buka stream.dart

Tambahkan method berikut ini.

Langkah 14: Buka main.dart

Tambahkan method onError di dalam class StreamHomePageState pada method listen di fungsi initState() seperti berikut ini.

Langkah 15: Edit method addRandomNumber()

Lakukan comment pada dua baris kode berikut, lalu ketik kode seperti berikut ini.

Skenario yang umum dilakukan adalah melakukan manipulasi atau transformasi data stream sebelum sampai pada UI end user. Hal ini sangatlah berguna ketika Anda membutuhkan untuk filter data berdasarkan kondisi tertentu, melakukan validasi data, memodifikasinya, atau melakukan proses lain yang memicu beberapa output baru. Contohnya melakukan konversi angka ke string, membuat sebuah perhitungan, atau menghilangkan data yang berulang terus tampil.

Pada praktikum 3 ini, Anda akan menggunakan StreamTransformers ke dalam stream untuk melakukan map dan filter data.

Setelah Anda menyelesaikan praktikum 2, Anda dapat melanjutkan praktikum 3 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buka main.dart

Tambahkan variabel baru di dalam class _StreamHomePageState

Langkah 2: Tambahkan kode ini di initState

Langkah 3: Tetap di initState

Lakukan edit seperti kode berikut.

Langkah 4: Run

Terakhir, run atau tekan F5 untuk melihat hasilnya jika memang belum running. Bisa juga lakukan hot restart jika aplikasi sudah running. Maka hasilnya akan seperti gambar berikut ini. Anda akan melihat tampilan angka dari 0 hingga 90.

Dari praktikum sebelumnya, Anda telah menggunakan method listen mendapatkan nilai dari stream. Ini akan menghasilkan sebuah Subscription. Subscription berisi method yang dapat digunakan untuk melakukan listen pada suatu event dari stream secara terstruktur.

Pada praktikum 4 ini, kita akan gunakan Subscription untuk menangani event dan error dengan teknik praktik baik (best practice), dan menutup Subscription tersebut.

Setelah Anda menyelesaikan praktikum 3, Anda dapat melanjutkan praktikum 4 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Tambah variabel

Tambahkan variabel berikut di class _StreamHomePageState

Langkah 2: Edit initState()

Edit kode seperti berikut ini.

Langkah 3: Tetap di initState()

Tambahkan kode berikut ini.

Langkah 4: Tambah properti onDone()

Tambahkan dibawahnya kode ini setelah onError

Langkah 5: Tambah method baru

Ketik method ini di dalam class _StreamHomePageState

Langkah 6: Pindah ke method dispose()

Jika method dispose() belum ada, Anda dapat mengetiknya dan dibuat override. Ketik kode ini didalamnya.

Langkah 7: Pindah ke method build()

Tambahkan button kedua dengan isi kode seperti berikut ini.

Langkah 8: Edit method addRandomNumber()

Edit kode seperti berikut ini.

Langkah 9: Run

Anda akan melihat dua button seperti gambar berikut.

Langkah 10: Tekan button ‘Stop Subscription'

Anda akan melihat pesan di Debug Console seperti berikut.

Secara default, stream hanya bisa digunakan untuk satu subscription. Jika Anda mencoba untuk melakukan subscription yang sama lebih dari satu, maka akan terjadi error. Untuk menangani hal itu, tersedia broadcast stream yang dapat digunakan untuk multiple subscriptions. Pada praktikum ini, Anda akan mencoba untuk melakukan multiple stream subscriptions.

Setelah Anda menyelesaikan praktikum 4, Anda dapat melanjutkan praktikum 5 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buka file main.dart

Ketik variabel berikut di class _StreamHomePageState

Langkah 2: Edit initState()

Ketik kode seperti berikut.

Langkah 3: Run

Lakukan run maka akan tampil error seperti gambar berikut.

Langkah 4: Set broadcast stream

Ketik kode seperti berikut di method initState()

Langkah 5: Edit method build()

Tambahkan text seperti berikut

Langkah 6: Run

Tekan button ‘New Random Number' beberapa kali, maka akan tampil teks angka terus bertambah sebanyak dua kali.

StreamBuilder adalah sebuah widget untuk melakukan listen terhadap event dari stream. Ketika sebuah event terkirim, maka akan dibangun ulang semua turunannya. Seperti halnya widget FutureBuilder pada pertemuan pekan lalu, StreamBuilder berguna untuk membangun UI secara reaktif yang diperbarui setiap data baru tersedia.

Setelah Anda menyelesaikan praktikum 5, Anda dapat melanjutkan praktikum 6 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buat Project Baru

Buatlah sebuah project flutter baru dengan nama streambuilder_nama (beri nama panggilan Anda) di folder week-12/src/ repository GitHub Anda.

Langkah 2: Buat file baru stream.dart

Ketik kode ini

Langkah 3: Tetap di file stream.dart

Ketik kode seperti berikut.

Langkah 4: Edit main.dart

Ketik kode seperti berikut ini.

Langkah 5: Tambah variabel

Di dalam class _StreamHomePageState, ketika variabel ini.

Langkah 6: Edit initState()

Ketik kode seperti berikut.

Langkah 7: Edit method build()

Langkah 8: Run

Hasilnya, setiap detik akan tampil angka baru seperti berikut.

Ketika menggunakan pola BLoC, maka segalanya merupakan stream event. BLoC atau Business Logic Component adalah lapisan antara semua sumber data dan UI yang mengonsumsi data itu. Contohnya seperti sumber data dari HTTP layanan web servis atau JSON dari sebuah basis data.

Sebuah BLoC menerima stream data dari sumbernya, proses itu membutuhkan logika bisnis Anda, dan return stream data ke subscriber-nya. Perhatikan diagram pola kerja BLoC berikut ini.

Alasan utama menggunakan BLoC adalah memisahkan logika bisnis aplikasi dengan presentasi UI pada widget, terutama akan sangat berguna ketika aplikasi Anda mulai semakin kompleks dan membutuhkan akses state di berbagai tempat. Hal ini akan membuat semakin mudah dalam menggunakan kode Anda, pada beberapa bagian di aplikasi atau bahkan berbeda aplikasi. Selain itu, BLoC secara independen berdiri sendiri dengan UI, sehingga sangat mudah dilakukan isolasi dalam proses testing.

Pada praktikum codelab ini, Anda akan membuat aplikasi sederhana menggunakan BLoC, namun Anda dapat dengan mudah mengembangkannya untuk aplikasi yang lebih besar ruang lingkupnya.

Setelah Anda menyelesaikan praktikum 6, Anda dapat melanjutkan praktikum 7 ini. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau Android Studio atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buat Project baru

Buatlah sebuah project flutter baru dengan nama bloc_random_nama (beri nama panggilan Anda) di folder week-12/src/ repository GitHub Anda. Lalu buat file baru di folder lib dengan nama random_bloc.dart

Langkah 2: Isi kode random_bloc.dart

Ketik kode impor berikut ini.

Langkah 3: Buat class RandomNumberBloc()

Langkah 4: Buat variabel StreamController

Di dalam class RandomNumberBloc() ketik variabel berikut ini

Langkah 5: Buat constructor

Langkah 6: Buat method dispose()

Langkah 7: Edit main.dart

Langkah 8: Buat file baru random_screen.dart

Di dalam folder lib project Anda, buatlah file baru ini.

Langkah 9: Lakukan impor material dan random_bloc.dart

Ketik kode ini di file baru random_screen.dart

Langkah 10: Buat StatefulWidget RandomScreen

Buatlah di dalam file random_screen.dart

Langkah 11: Buat variabel

Ketik kode ini di dalam class _RandomScreenState

Langkah 12: Buat method dispose()

Ketik kode ini di dalam class _StreamHomePageState

Langkah 13: Edit method build()

Ketik kode ini di dalam class _StreamHomePageState

Run aplikasi, maka Anda akan melihat angka acak antara angka 0 sampai 9 setiap kali menekan tombol FloactingActionButton.

Selamat Anda telah menyelesaikan Codelab ini. Anda telah mempelajari terkait stream, BLoC dan contoh penggunaannya.

Pada codelab berikutnya, Anda akan mempelajari tentang Persistensi Data.

Jangan sungkan jika Anda menemukan kesalahan pada codelab ini untuk merevisi atau sekedar melaporkan issue melalui tautan di pojok kiri bawah (Report a mistake).

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

Referensi