Apa itu BLOC

Flutter BLoC (Business Logic Component) adalah sebuah arsitektur state management pada Flutter yang bertujuan untuk memisahkan logika bisnis (business logic) dari tampilan (UI). Dalam Flutter BLoC, data dianggap sebagai aliran (stream) yang mengalir dari sumber data ke objek tampilan. Ketika data diubah, objek tampilan akan diperbarui secara otomatis. 

Flutter BLoC menggunakan Dart Stream untuk mengimplementasikan aliran data, yang memungkinkan untuk mengirim data yang berubah ke banyak objek tampilan secara efisien. Dalam arsitektur ini, BLoC berfungsi sebagai penghubung antara tampilan dan sumber data, sehingga tampilan tidak perlu menangani logika bisnis secara langsung.

Flutter BLoC memudahkan pengembang untuk mengelola kompleksitas aplikasi dengan memisahkan tampilan dan logika bisnis. Selain itu, Flutter BLoC juga memungkinkan pengembang untuk menguji logika bisnis secara terpisah tanpa harus mempengaruhi tampilan, sehingga memudahkan dalam melakukan testing.

Cara Kerja State Management BLOC

BLoC (Business Logic Component) merupakan salah satu teknik State Management pada Flutter, yang bertujuan untuk memisahkan logika bisnis dari UI. Dalam BLoC, state digunakan untuk merepresentasikan data yang akan diubah sesuai dengan input pengguna atau perubahan data dari sumber lain. Berikut adalah cara kerja State Management BLoC secara umum:

• Bloc

– BloC merupakan class yang bertugas untuk memproses event dan mengubah state sesuai dengan event yang diterima.

– Pada saat sebuah event diterima, class BLoC akan memproses event tersebut dan menghasilkan perubahan state baru.

• Event

– Pada saat ada suatu event, seperti tombol ditekan atau data diambil dari API, sebuah event akan dikirimkan ke BLoC.

– Event ini biasanya berupa object yang merepresentasikan aksi yang dilakukan oleh pengguna atau perubahan pada data.

• State

– State merepresentasikan data yang akan diubah sesuai dengan event yang diterima.

– Setelah sebuah event diproses oleh BLoC, state akan diubah sesuai dengan logika bisnis pada class BLoC.

• UI

– State yang telah diubah akan diteruskan ke UI agar dapat ditampilkan kepada pengguna.

– UI akan merender ulang tampilan sesuai dengan state yang telah diubah.

• Sink dan Stream

– Pada BLoC, event dan state biasanya dikirimkan menggunakan sink dan stream.

– Sink berfungsi untuk menerima input event, sedangkan stream digunakan untuk mengirimkan output state ke UI.

Dalam BLoC, logika bisnis terpisah dari UI sehingga memungkinkan untuk melakukan pengujian (testing) pada logika bisnis secara terpisah tanpa harus memeriksa UI. Selain itu, dengan menggunakan sink dan stream, kita dapat memperbarui tampilan secara responsif ketika terjadi perubahan pada state.

Menambahkan Plugin BLOC pada Code Editor

Untuk dapat memudahkan kita dalam menggunakan State Management BLOC kita perlu menambahkan Plugin BLOC pada Code Editor Yang kita miliki. Berikut langkah-langkah untuk Menambahkan Plugin BLOC pada Code Editor Visual Studio Code dan Android Studio.

• VS Code

Pada VS Code, untuk menginstall plugin BLoC, dapat dilakukan dengan langkah-langkah berikut:

– Buka VS Code

– Pilih menu Extensions pada sidebar sebelah kiri

– Ketikkan “BLoC” pada kolom pencarian

– Pilih plugin bernama “BLoC” yang dikembangkan oleh Felix Angelov

– Klik tombol Install pada plugin tersebut

– Tunggu hingga proses instalasi selesai

– Restart VS Code

Setelah plugin BLoC terpasang, Anda akan melihat beberapa perintah baru yang tersedia di menu Command Palette, seperti “Bloc: New Bloc”, “Bloc: New Cubit”, “Bloc: New Flutter Bloc Event”, dan sebagainya.

• Android Studio

Pada Android Studio, untuk menginstall plugin BLoC, dapat dilakukan dengan langkah-langkah berikut:

– Buka Android Studio

– Pilih menu Preferences (pada Mac) atau Settings (pada Windows)

– Pilih menu Plugins pada sidebar sebelah kiri

– Ketikkan “BLoC” pada kolom pencarian

– Pilih plugin bernama “Flutter Bloc Generator” yang dikembangkan oleh Felix Angelov

– Klik tombol Install pada plugin tersebut

– Tunggu hingga proses instalasi selesai

– Restart Android Studio

Setelah plugin BLoC terpasang, Anda dapat menggunakan plugin tersebut untuk membangun state management dengan BLoC pada Flutter.

Perlu diingat bahwa cara untuk menginstall plugin BLoC pada code editor dapat berbeda-beda tergantung pada versi dan konfigurasi masing-masing editor. Namun, umumnya, cara di atas dapat diterapkan pada kebanyakan code editor yang umum digunakan untuk Flutter.

Menambahkan Dependesi Flutter BLOC

• Flutter Bloc

flutter pub add flutter_bloc

Atau kita bisa menambahkan manual pada file pubspec.yaml pada project kita seperti berikut.

dependencies:
 flutter:
   sdk: flutter
 flutter_bloc: ^8.1.2