[Flutter] Freezed dan Bloc

Pada kesempatan kali ini saya mau membagikan sebuah tutorial sederhana bagaimana menggunakan package freezed dan bloc sebagai state managementnya. Freezed digunakan sebagai code-generation yang membantu kita dalam membuat sebuah class di Dart agar terhindar dari kesalahan saat membuat kode program dan Bloc merupakan state management yang menggunakan konsep Stream

Untuk lebih detailnya dapat di klik di bawah ini

Langsung saja kita mulai membuat projectnya, untuk kemudahan kita akan membuat sebuah project sederhana seperti counter_app.

Pertama buat dahulu project flutternya dari terminal kalian

Kemudian tambahan package di bawah ini

Kemudian jalankan projectnya

Kemudian kita membuat sebuah file baru di folder /lib, beri nama file tersebut counter_page.dart, kemudian buatlah sebuah layout sesuai dengan keinginan kalian atau bisa menggunakan kode di bawah ini

Kemudian jangan lupa untuk mengubah layout utama di dalam main.dart menjadi seperti berikut ini

Jika sudah lalu kita buat folder bloc di dalam folder /lib kemudian buat 3 file atau kalian juga bisa menginstal extensi bloc dari VSCode yang otomatis akan membuat 3 file tersebut

File pertama adalah counter_event.dart dan berikut ini adalah isinya

Perhatian!! Jangan khawatir jika terjadi error yaitu tulisan merah pada file yang telah kita buat karena file yang dibutuhkan oleh freezed tersebut belum kita generate menggunakan build_runner

File kedua adalah counter_state.dart dan berikut ini adalah isinya

Kemudian ketik perintah ini untuk menjalankan proses build_runner, dengan ini maka build_runner akan membuat kode generasi otomatis terhadap file bloc yang telah kita buat. Dan pastikan terdapat file counter_bloc.freezed.dart

Dan terakhir file ketiga adalah counter_bloc.dart yang berfungsi untuk mengatur state pada setiap event yakni increment dan decrement dan untuk state akan menampilakn hasil dari perubahan angka antara fungsi increment atau decrement dan berikut ini adalah isinya

Kemudian kita ubah kembali file di counter_page.dart lalu kita tambahkan kode berikut, disini kita membungkus widget Text yang akan kita ubah nilainya berdasarkan state

Langkah terakhir adalah kita ubah kembali isi dari file main.dart kemudian kita ubah menjadi seperti ini, disini kita akan menambahkan BlocProvider sebelum MaterialApp

Inilah hasil akhirnya

Mungkin akan terlihat susah untuk dipelajari karena ini adalah tutorial pertama saya, yang bisa saja menjadi sulit untuk kalian pahami. Tetapi tidak menutup kemungkinan saya membantu kalian jika ada masalah yang dihadapi dalam tutorial ini.

Selepas dari hal itu mungkin saya akan memberikan ulasan atau pemahaman dari penggunaan kode diatas agar memudahkan kalian dalam mempelajarinya. Stay tuned saja kawan...

Cukup sekian dan terimakasih sudah mampir di mari gan...

Salam ☕