Flutter BLoC (Business Logic Component) adalah arsitektur aplikasi yang dikembangkan oleh Google dan digunakan untuk membangun aplikasi mobile dengan Flutter. Ini menyediakan cara untuk memisahkan logika bisnis dari logika interface pengguna.
Dengan menggunakan BLoC, Anda dapat mengelola data dan logika bisnis aplikasi Anda dalam satu tempat yang terpisah dari kode tampilan, yang membuat aplikasi Anda lebih mudah diatur dan dipelihara.
Hal ini juga membuat aplikasi Anda lebih mudah dikelola dan ditingkatkan, karena logika bisnis dapat diubah atau ditingkatkan tanpa mempengaruhi tampilan.
Salah satu package yang terkenal dan populer adalah BLOC yang di buat oleh Felic Angelov. Nah, pada kesempatan kali ini, kita akan membahas lebih detail tentang penggunaan dari salah satu fiturnya yaitu Cubit.
Apa itu Cubit?
Cubit adalah class yang extends dengan blocbase yang dapat digunakan untuk mengelola sebuah state dengan mudah dan simpel. Cubit dapat mengekpos sebuah function yang dapat dipanggil untuk men-trigger sebuah state.
State itu sendiri adalah output dari si Cubit yang merepresentasikan setiap perubahan data pada aplikasi kita. Tampilan UI akan diberi tahu tentang perubahan status state dan akan merebuild ulang sesuai dengan state yang diberikan.
Untuk membuat sebuah cubit caranya sangat sederhana, kamu dapat membuat sebuah class yang extends dengan cubit beserta jenis variabel state yang akan dikelola.
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
}Pada contoh CounterCubit diatas, state yang dikelola adalah variabel int, namun kamu juga dapat membuat statenya menjadi custom class sesuai kebutuhan data yang akan dikelola.
Selain itu, kita juga wajib menambahkan value awal pada state kita, dimana pada contoh diatas kita menambahkan nilai awal 0.
Sebelum menggunakan cubit, kamu wajib melakukan instansiasi pada fungsi atau widget yang ingin menggunakan fitur cubit. Berikut contoh bagaimana cara melakukan instansiasi cubit:
final cubitA = CounterCubit(0); // state starts at 0
final cubitB = CounterCubit(10); // state starts at 10Perubahan State
Setiap cubit dapat menghasilkan output state baru via emit.
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
}
Seperti yang disebutkan sebelumnya, cubit mengekpos sebuah function yang dapat menjadi trigger untuk melakukan perubahan state. Pada contoh snippet kode diatas, kita tambahkan function untuk mengupdate nilai dari state kita menjadi increment dengan menambahkan 1 di setiap state baru.
Fungsi emit bersifat protected, yang artinya hanya bisa digunakan didalam class yang extends dengan cubit saja.
Menggunakan Cubit
Setelah kita membuat function increment(), kita dapat memanggil fungsi tersebut di widget atau fungsi lain.
void main() {
final cubit = CounterCubit();
print(cubit.state); // 0
cubit.increment();
print(cubit.state); // 1
cubit.close();
}Fungsi cubit.close() berfungsi untuk menutup atau mendispose bloc dari project kita. Kamu juga dapat menggunakan berbagai widget builder yang memanfaatkan data dari perubahan state seperti BlocBuilder, BlocConsumer, BlocListener, dan lain sebagainya.
Untuk penjelasan lebih lanjut, kamu dapat melihat video dibawah ini yang menjelaskan tentang penerapan dari Cubit.
