State Management Provider

Didalam sebuah aplikasi, kita sering menjumpai perubahan tampilan pada saat sebuah keadaan (state)
tertentu berubah. Contohnya terdapat Angka dalam text dan tombol FloatingActionButton, lalu tombol
tersebut kita beri sebuah fungsi untuk menjumlahkan angka dengan kenaikan 1 angka. Untuk merubah
nilai dari sebuah text, kita perlu mengubah state nilai dari variabel Angka tersebut. Umumnya, flutter
telah menyediakan fungsi setState(), sehingga nilai dari variable Angka akan berubah berdasarkan state
yang baru. Berikut adalah baris kode dalam menerapkan fungsi setState().
Berdasarkan baris kode serta tampilan diatas, tiap kali user menekan tombol tambah, teks akan
berubah. Hal ini terjadi karena nilai state dari variabel Angka telah berubah dan text akan berubah juga
mengikuti perubahan variabel tersebut.

Tetapi, penggunaan fungsi setState() memiliki kelemahan, yakni akan membangun ulang setiap widget
yang ada dihalaman tersebut. Jika ini diterapkan pada aplikasi yang kompleks dengan berbagai fitur
didalamnya, maka akan membebani aplikasi dan akan menyebabkan aplikasi error.

Ada pendekatan lain dalam mengatur state selain menggunakan setState(), yakni Provider. Sebagai
pemula dalam framework Flutter, state management menggunakan Provider menjadi pilihan yang tepat
untuk belajar, serta mudah untuk dipahami.

Sebagai contoh, kita dapat mengulangi baris kode diatas, tetapi merombak state management nya
menjadi Provider.

Untuk mengawali membuat aplikasi dengan Provider, kita perlu menambahkan package provider pada
file pubspec.yaml. Kita bisa menemui package ini pada link ini https://pub.dev/packages/provider. Saat
materi ini dibuat, provider yang saya gunakan pada versi provider: ^6.0.1. Berikut adalah file
pubspec.yaml yang telah ditambahkan package provider.

Lakukan install package dengan menjalankan perintah flutter pub get melalui terminal. Setelah proses
install selesai, maka kita dapat menggunakan fungsi-fungsi yang berada pada package provider.
Ada beberapa fungsi yang sering dipakai dalam aplikasi untuk menerapkan state management Provider,
seperti:

 ChangeNotifier
ChangeNotifier merupakan class dari package foundation, bawaan dari Flutter SDK, yang mampu
mengenkapsulasi state yang ada didalamnya. Dengan menyediakan class ini, state atau variable
akan tersimpan selama aplikasi masih berjalan. Jika aplikasi berhenti, maka state akan kembali
ke nilai awal. Berikut merupakan contoh baris kode untuk penerapan ChangeNotifier.

Baris kode diatas memiliki class bernama AngkaNotifier dimana class tersebut
diperluas/digabung dengan class ChangeNotifier. Didalam class tersebut terdapat private
variabel (diawali dengan underscore) _angka yang diberi nilai awal 0 sebagai integer . Lalu ada
fungsi angka untuk mengembalikan nilai dari variabel _angka. Selanjutnya ada fungsi tambah()
untuk menjumlahkan _angka dengan kenaikan 1. Didalam fungsi tambah() terdapat fungsi lain
yakni notifyListeners(), dimana berfungsi untuk memberitahukan widget-widget yang
“mendengarkan” variabel _angka agar memperbaharui widgetnya dengan nilai yang baru.
Sehingga, ketika nilai _angka berubah dari 0 menjadi 1, maka widget yang mendengarkan nilai
_angka akan berubah juga.
 ChangeNotifierProvider
ChangeNotifierProvider merupakan widget dari package provider, yang akan “mendengarkan”
perubahan state/nilai yang ada di class ChangeNotifier. Setelah mendengarkan perubahan state,
maka widget yang ada dibawah kendalinya akan mengikuti perubahan tersebut. Inisialisasi dari
ChangeNotifierProvider biasanya diawal halaman yang akan kita tuju. Misalkan kita akan pindah
ke halaman Home, maka sebelum inisialisasi halaman Home, kita selimuti halaman Home
dengan ChangeNotifierProvider. Dengan begitu, perubahan ChangeNotifier akan didengar oleh
seluruh widget dibawah halaman Home. Berikut contoh baris kode dalam penerapan
ChangeNotifierProvider.

Seperti yang kita ketahui, bahwa ChangeNotifierProvider merupakan widget, sehingga kita bisa
meletakkannya layaknya widget pada umumnya. Berdasarkan baris kode diatas, halaman
MyHomePage() telah tebungkus oleh ChangeNotifierProvider dari class AngkaNotifier, dimana
saat ada perubahan variabel _angka (berdasarkan penjelasan sebelumnya) maka widget
dibawah MyHomePage akan bisa mendengarkan perubahannya.

Jika kita pindah ke halaman lain, misalkan halaman Search, perubahan yang terjadi pada
AngkaNotifier tidak dapat didengar oleh SearchPage karena halaman Search tidak terbungkus
oleh ChangeNotifierProvider dari class AngkaNotifer. Jika ingin mendengarkan perubahannya
juga, halaman Search perlu dibungkus juga dengan ChangeNotifierProvider seperti pada
halaman Home.
 MultiProvider
Terkadang, kita memerlukan beberapa provider seperti ChangeNotifierProvider yang bersusun
agar halaman tertentu mampu mendengarkan beberapa ChangeNotifier. Berdasarkan cara
sebelumnya, kita bisa daftarkan secara bersusun-susun pada fungsi builder di parameter
ChangeNotifierProfider. Tetapi sebagai programmer sedikit sulit untuk membacanya. Dengan
adanya MultiProvider, kita mampu menggabungkan beberapa provider yang akan kita daftarkan
pada sebuah list providers. Berikut contoh baris kode untuk penerapan MultiProvider.

 Provider.of()
Ada berbagai cara untuk mengakses atau membaca nilai dari class provider, salah satunya
adalah fungsi Provider.of<T>() dimana <T> adalah nama class. Fungsi ini bukan merupakan
sebuah widget yang dapat disematkan diberbagai child widget, tetapi hanya memanggil class
dari ChangeNotifier.

Fungsi ini membutuhkan parameter BuildContext untuk menelusuri apakah class yang dipanggil
telah diterdaftar pada widget tree diatasnya. Selain itu ada parameter lain yakni listen, bertipe
data Boolean, dimana jika bernilai true maka akan mendengar perubahan state dari class
tersebut, dan jika bernilai false maka tidak akan mendengarkan perubahan state. Secara default,
parameter listen bernilai true. Berikut adalah contoh baris kode dalam penggunaan fungsi
Provider.of().
 No Baris code Penjelasan
1 Secara default, parameter
listen bernilai true.
Sehingga jika ada
perubahan nilai pada
variabel angka, maka
secara otomatis teks akan
berubah mengikuti
perubahan variabel angka.
2 Parameter listen bernilai
false. Biasanya digunakan
untuk memanggil fungsi
didalam class dari
ChangeNotifier, dalam hal
ini adalah menjalankan
fungsi tambah().

Selain fungsi Provider.of(), ada fungsi lain yang sifatnya sama dalam memanggil atau membaca
class dari ChangeNotifier. Untuk fungsi Provider.of<T>(context) akan sama seperti
context.watch<T>(), sedangkan untuk Provider.of<T>(context, listen: false) sama seperti
context.read<T>(). Pengguaannya sama hanya mengganti menjadi context.watch() atau
context.read().

 Consumer
Consumer merupakan sebuah widget pengembangan dari fungsi Provider.of() dengan
penambahan Builder sebagai pengembalian widget. Consumer sama halnya seperti Provider.of()
dengan parameter listen true, dimana selalu mendengarkan perubahan state/nilai dari class
ChangeNotifier. Consumer sering kali digunakan jika perubahan state mempengaruhi perubahan
tampilan aplikasi.

Contoh umumnya disaat aplikasi membutuhkan data melalui internet, tampilan aplikasi
sebaiknya menunjukkan sedang dalam proses memuat data (loading), dan setelah mendapatkan
data tampilan aplikasi menampilkan data tersebut. Berdasarkan contoh tersebut, state yang
diatur adalah status pengambilan data, dimana saat memuat data berstatus loading, jika telah
berhasil mendapatkan data berstatus loaded, jika terjadi error saat memuat data berstatus
error. Berikut contoh baris kode untuk pemahaman penggunaan widget Consumer.
Berdasarkan baris kode diatas, kita memiliki enumerasi atau nilai konstanta bernama
LoaderState, dimana terdapat 3 status yakni loading, data, dan noData. Ketiga status itu yang
akan menjadi acuan state pada ChangeNotifier untuk didengarkan oleh widget Consumer. Lalu
kita definisikan class TeksNotifier sebagai extend dari ChangeNotifier dan terdapat fungsi
memuatData() yang bersifat Future. Dengan kata lain akan memuat fungsi yang terdelay (dalam
hal ini 1 detik) dengan memberitahukan widget akan terjadi perubahan state. Sebelum fungsi
delay dijalankan, state berubah menjadi loading, dan setelah fungsi delay berakhir, state
berubah lagi menjadi data.

Untuk tampilan aplikasi, kita beri widget Consumer sebagai pendengar state jika terjadi
perubahan LoaderState. Jika state berstatus loading, maka aplikasi menampilkan widget
CircularProgressIndicator(), sedangkan status lain akan menampilkan widget Text(). Tentu saja
widget FloatingActionButton() menjadi trigger untuk menjalankan fungsi memuatData(). Jika
baris kode dijalankan, tampilan aplikasi akan menjadi seperti gambar dibawah ini.
 Consumer harus mengembalikan nilai widget agar Consumer dapat diletakkan sebagai widget
pada umumnya. Didalam fungsi builder, terdapat 3 parameter yakni BuildContext, class Notifier,
dan Widget. Class Notifier ini yang dapat memanggil fungsi/state yang ada didalamnya, dalam
hal ini state teks, state loaderState dan fungsi memuatData().

Setelah membahas beberapa fungsi/widget yang berhubungan dengan State Management Provider, kita
dapat menyusun ulang program yang awalnya menggunakan setState() menjadi Provider. Berikut
keseluruhan kode penjumlahan angka menggunakan State Management Provider.
Cukup pembahasan mengenai State Management Provider kali ini. Provider mampu digunakan sebagai
state management pada umumnya, seperti mengatur state pada saat memuat data melalui internet,
membaca file, penyimpan data sementara, dan masih banyak lainnya. Yang terpenting adalah
penggunaan state agar user mengetahui proses/alur apa yang sedang dikerjakan oleh aplikasi.

Sekian dari saya, maaf jika ada kekurangan.. Happy Coding !!