Home Mobile Mengenal State Management FLutter Cubit

Mengenal State Management FLutter Cubit

0

Apa itu CUBIT ?

Flutter Cubit adalah sebuah state management library atau pustaka untuk pengembangan aplikasi Flutter. Library ini menyediakan sebuah pendekatan arsitektur yang jelas dan terstruktur untuk mengatur state pada aplikasi Flutter.

Cubit memungkinkan pengembang untuk memisahkan logika bisnis dari tampilan (UI) dan mempertahankan state aplikasi dengan cara yang responsif dan efisien. Dalam pengembangan aplikasi Flutter, Cubit digunakan untuk mengelola state dan memperbarui UI saat terjadi perubahan state.

Dalam penggunaannya, Cubit biasanya berjalan dengan menggunakan konsep reactive programming. Event atau aksi yang dilakukan oleh pengguna pada aplikasi akan men-trigger perubahan state yang dikelola oleh Cubit. Setelah state berubah, Cubit akan memberitahu tampilan (UI) untuk memperbarui dirinya sesuai dengan perubahan state.

Flutter Cubit dapat membantu pengembang aplikasi Flutter dalam mengatur dan memanage state secara efektif dan efisien. Selain itu, library ini juga memungkinkan pengembang untuk memperbaiki performa dan keamanan aplikasi secara signifikan.

Cara Kerja State Management Bloc

Cubit adalah sebuah state management library yang dapat digunakan untuk mengelola state pada aplikasi Flutter. Berikut adalah cara kerja state management Cubit:

  • Mengatur State:

Pertama, pengembang mengatur state awal pada Cubit ketika aplikasi dibuka. State ini dapat berupa objek atau data lainnya yang diperlukan untuk menjalankan aplikasi.

  • Mengelola Event:

Ketika pengguna melakukan aksi atau event pada aplikasi, Cubit akan menangkap event tersebut dan memprosesnya. Contoh event pada aplikasi bisa berupa penekanan tombol, masukan input, atau interaksi dengan elemen lain pada aplikasi.

  • Memproses Event:

Cubit akan memproses event atau aksi yang dilakukan oleh pengguna dan mengubah state aplikasi sesuai dengan event tersebut. Jika event yang dilakukan pengguna membutuhkan perubahan state, maka Cubit akan mengubah state sesuai dengan event tersebut.

  • Memberitahu Perubahan State:

Setelah state berubah, Cubit akan memberitahu aplikasi bahwa terjadi perubahan state. Aplikasi kemudian akan memperbarui tampilan (UI) untuk memperlihatkan state terbaru.

  • Mempertahankan State:

Cubit akan mempertahankan state baru tersebut dan menggunakan state ini sebagai state awal untuk event atau aksi selanjutnya yang dilakukan oleh pengguna.

Dalam penggunaannya, Cubit biasanya berjalan dengan menggunakan pendekatan reactive programming. Ketika event atau aksi dilakukan oleh pengguna, Cubit akan merespons secara cepat dan memberikan perubahan state yang responsif. Dengan cara ini, Cubit dapat membantu pengembang untuk membangun aplikasi Flutter yang responsif, efektif, dan efisien.

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