Simple BLOC Implementation
Flutter pasti sudah bukan hal yang asing lagi ditelinga developer pada umumnya. Jelas karna flutter mampu menjadi alternatif dalam mengembangkan aplikasi Android dan iOS dalam waktu yang relatif lebih singkat. Cross Platform Framework yang dikembangkan oleh Google ini, bersifat open source sehingga tak heran jika perkembangannya saat ini sudah mencapai versi 1.9 dengan Dart 2.5 .
Artikel ini tidak akan menjelaskan fitur unggulan flutter berupa keindahan UI yang mampu dibuat dengan mudah. Namun dalam artikel ini akan dijelaskan hal dasar dalam pengimplementasian sebuah manajemen state yang sering dilupakan oleh sebagian besar developer dalam mengembangkan aplikasi, baik secara native maupun menggunakan flutter.
Developer diberikan kebebasan menentukan sebuah pola manajemen state, yang digunakan dalam mengembangkan produk dengan flutter. Namun Business Logic Component atau BLoC sangat disarankan untuk digunakan dalam manajemen state pada flutter. BloC akan membantu dalam mebuat akses data dari pusat project flutter. BLoC memiliki dua komponen utama yaitu berupa Stream dan Sink yang dapat diakses melalui ‘dart: async’ yang merupakan library dari StreamCotroller. Ketika terdapat sebuah masukan data (event) maka seluruhnya akan dihandle melalui Sink sedangkan keluaran(state) akan dihandle melalui Streams.
Buatlah project flutter sesuai dengan IDE (VSCode, Intellij IDEA, atau Android Studio) yang anda gunakan.
- Default code pada project flutter adalah counter app, sehingga akan lebih simple jika mencoba untuk membuat manajemen state dari default apps tersebut.
2. Karena secara default counter hanya berupa increament maka pada project kali ini mari coba untuk membuat dua operation yaitu increment dan decreament. Untuk memisahkan logic operation dengan UI maka buatlah sebuat dart file event. Selanjutnya buat abtract class untuk operation event dengan operasi increment dan decrement, pada file yang baru dibuat.
3. Selanjutnya buat kelas bloc untuk mendeklasikan fungsi event dan state serta logic operation yang berasal dari OperationEvent abtract class yang sebelumnya telah dibuat.
4. Selanjutnya buat screen file yang digunakan untuk membuat tampilan ui dari aplikasi.
5. Hapus code yang sudah tidak digunakan pada ‘main.dart’ selanjutnya panggil OperationScreen class pada ‘main.dart’ sebagai body dengan menambahkan komponen scaffold pada main class terlebih dahulu.
Sehingga struktur file pada project ini sebagai berikut :
Dapat dilihat di atas bahwa ui dan logic sudah berada ditempat yang terpisah sehingga dalam prakteknya anda sebagai developer dapat lebih fokus pada setiap fungsi code yang telah anda buat. Dimana logic aplikasi berfokus pada kelas bloc. Dan hasil compiling codenya sebagai berikut :
Sourcecode here.
