State Management & Flutter Bloc

Tutorial
Flutter Intensive Club (FIC)
Saiful Bahri
https://linkedin.com/in/bahrie

https://youtube.com/@codewithbahri
State dan Pendekatannya Pada
Flutter

Saat kita sudah mengenal flutter lebih jauh dan

mengembangkan sebuah aplikasi yang terdiri dari banyak
page atau screen, tentu kita akan menemukan sebuah
problem tentang cara berbagi data (atau saya
menyebutnya di pengantar ini dengan sebutan State)
antar page.

https://youtube.com/@codewithbahri
Apa itu State ???

Di dalam konteks flutter, secara

sederhana state adalah data atau
variabel yang digunakan untuk
membangun UI (User Interface) di
flutter kapan saja.

https://youtube.com/@codewithbahri
Apa itu state??

Kita tahu bahwa flutter bersifat deklaratif. Artinya, flutter

membangun dan menampilkan antarmuka pengguna
sesuai dengan kondisi state saat itu. Jadi developer hanya
perlu mendeskripsikan state saat ini, dan membiarkan
framework (flutter) membangun ulang tampilan sesuai
kondisi state yang dideskripsikan.

https://youtube.com/@codewithbahri
State di dalam flutter di bagi
menjadi 2

1. Ephemeral State (State Local)

2. App State (Shared State)
Ephemeral State atau yang dikenal dengan state local,
adalah state yang hanya digunakan di dalam satu widget.
Satu widget dapat membangun satu buah page atau
screen, namun satu page atau screen belum tentu terdiri
dari satu widget.

https://youtube.com/@codewithbahri
Contoh implementasi state local ini yang sering
digunakan:

a. index tab yang dipilih pada BottomNavigationBar

b. Nilai boolean pada widget Switch

c. Nilai progres pada animasi

https://youtube.com/@codewithbahri
Karena state ini hanya digunakan pada satu widget
atau tidak terjadi lempar-lemparan state antar
widget atau page, maka SetState() harusnya sudah
cukup untuk menghandelnya. Jadi tidak perlu
menggunakan state management.

https://youtube.com/@codewithbahri
Selanjutnya, App State atau yang dikenal Shared
State. Kenapa Shared State? Karena statenya tidak
hanya digunakan di satu widget, namun lebih
bahkan bisa banyak page yang terdiri banyak
widget. Contoh: informasi login, feature cart pada
ecommerce.

https://youtube.com/@codewithbahri
Mengelola App State tentu tidak semudah Local
State. Tergantung kompleksitas aplikasi, sifat
aplikasi, atau aspek lainnya (banyak parameter
untuk dipertimbangkan). Jika memang kompleks,
maka kita dapat melakukannya dengan mudah jika
menggunakan bantuan dari state management.

https://youtube.com/@codewithbahri
Sejujurnya menggunakan setState() saja bisa.
Namun kita sebagai developer tentunya
membutuhkan tools yang mempermudah dan
mempercepat kita, salah satunya dalam
mengelola App State ini, yaitu dengan State
Management.

https://youtube.com/@codewithbahri
Berikut beberapa pilihan state management yang
dapat kalian pelajari:

Provider
Bloc
Redux
MobX
GetX
Riverpod
dll

https://youtube.com/@codewithbahri
BLoC Documentation

https://bloclibrary.dev/#/gettingstarted

https://youtube.com/@codewithbahri
Installation
https://pub.dev/packages/flutter_bloc

- pubspec.yml

dependencies:
flutter_bloc: ^8.1.2

https://youtube.com/@codewithbahri
Installation
https://pub.dev/packages/flutter_bloc

Tambahakan pubspec.yml

dependencies:
flutter_bloc: ^8.0.0

Running di terminal:
flutter pub get -v

https://youtube.com/@codewithbahri
Import

import 'package:flutter_bloc/flutter_bloc.dart';

https://youtube.com/@codewithbahri
Mengapa Bloc ?
Bloc memudahkan untuk memisahkan
presentasi(UI) dari logika bisnis (Logic), membuat
kode Anda cepat, mudah diuji, dan dapat
digunakan kembali.

https://youtube.com/@codewithbahri
Mengapa Bloc ?
Saat development aplikasi kualitas produksi,
mengelola status menjadi sangat penting.

Sebagai Developer kami ingin:

1. tahu status aplikasi kita kapan saja.

2. dengan mudah menguji setiap kasus untuk memastikan aplikasi kami merespons
dengan tepat.
3. merekam setiap interaksi pengguna tunggal dalam aplikasi kami sehingga kami dapat
membuat keputusan berdasarkan data.
4. bekerja seefisien mungkin dan menggunakan kembali komponen baik di dalam aplikasi
kami maupun di seluruh aplikasi lain.
5. memiliki banyak pengembang yang bekerja dengan mulus dalam basis kode tunggal
mengikuti pola dan konvensi yang sama.
6. mengembangkan aplikasi cepat dan reaktif.

https://youtube.com/@codewithbahri
Mengapa Bloc ?
Blok dirancang untuk memenuhi semua kebutuhan tersebut
dan banyak lagi.

Ada banyak solusi manajemen state dan memutuskan mana

yang akan digunakan bisa menjadi tugas yang menakutkan.
Tidak ada solusi manajemen state yang sempurna! Yang
penting adalah Anda memilih salah satu yang paling cocok
untuk tim dan proyek Anda.

https://youtube.com/@codewithbahri
Mengapa Bloc ?
Blok dirancang dengan mempertimbangkan tiga nilai inti:

1. Sederhana: Mudah dipahami & dapat digunakan oleh developer dengan

berbagai tingkat keahlian.
2. Kuat: Bantu membuat aplikasi yang luar biasa dan rumit dengan
menyusunnya dari komponen yang lebih kecil.
3. Dapat diuji: Menguji setiap aspek aplikasi dengan mudah sehingga kami
dapat melakukan iterasi dengan percaya diri.

Secara keseluruhan, Bloc mencoba membuat perubahan status dapat

diprediksi dengan mengatur kapan perubahan status dapat terjadi dan
menerapkan satu cara untuk mengubah status di seluruh aplikasi.

https://youtube.com/@codewithbahri
https://youtube.com/@codewithbahri
Create counter_bloc.dart
Create abstract class CounterEvent
Add class CounterBloc

https://youtube.com/@codewithbahri
https://youtube.com/@codewithbahri
Sourcecode:
https://github.com/bahrie127/fic_basic_flutter_bloc_stream_controller

https://github.com/bahrie127/fic_flutter_bloc_example

https://youtube.com/@codewithbahri