Pada artikel ini saya akan sharing tutorial membuat sebuah aplikasi Flutter dengan menggunakan state management riverpod. Apa itu state management?
Ilustrasi state management (docs.flutter.dev)
State management adalah konsep di dalam sebuah aplikasi untuk mengelola data yang dapat diakses di berbagai halaman seperti view / widget. Misalnya ketika login kamu butuh username dan password dari view login untuk kemudian diproses. Begitu pula ketika ada halaman produk, ketika kamu menambahkan item (mengubah state cart) maka tampilan yang berubah hanya total pada icon shopping cart dan list produk daftar belanja, tampilan yang lain tidak dirender ulang.
Flutter merupakan declarative UI, dimana setiap ada perubahan state, maka view yang me-listen state tersebut akan dirender ulang secara otomatis
Pada Flutter, terdapat 2 jenis tipe widget yang berbeda dalam mengelola state, yaitu Stateless Widget dan Stateful Widget
- Stateless widget, itu buat data statis. Data — data yang ada di dalam view kamu tidak berubah. Misalnya, about us screen, loading screen, dsb.
- Stateful widget, itu buat data dinamis. Misalnya, view yang membutuhkan data dari API, halaman kalkulator, detail produk, list shopping cart screen, dsb.
Terdapat banyak sekali state management yang digunakan dalam ekosistem Flutter ada Provider, Riverpod (Provider 2.0), Redux, Bloc, dan GetX. Tinggal pilih salah satu sesuai pilihan kita. Alasan saya memilih Riverpod adalah menyesuaikan dengan kebutuhan kantor, jadi saya belum coba state management lain. Artikel ini tidak berisi apa saja perbedaan dari masing-masing state management, hanya sesuai dengan pengalaman saya menggunakan Riverpod.
Pada artikel ini saya akan meng-cover fundamental dari riverpod sehingga kamu bisa memahami bagaimana riverpod bekerja.
Riverpod
Nama Riverpod — anagram dari Provider — adalah versi 2.0 dari Provider. Berdasarkan website resminya, Riverpod mengupdate pengembangan dari Provider mulai dari:
- Tidak ada lagi ProviderNotFoundException
- Support multiple Provider dengan tipe yang sama
- Memanggil provider dari mana aja
- Awaiting asynchronous providers. Misal buat API
Cus langsung ngoding aja biar lebih paham~
Instalasi Riverpod
Ketik CMD + SHIFT + P dan pilih “add dependencies”, kemudian tulis flutter_riverpod
dan tekan Enter. Otomatis vscode akan menjalankan command flutter pub get.
Pilih pubspect assist untuk mendownload package
Ketik flutter_riverpod dan tekan enter
Kamu juga bisa mengupdate file pubspec.yaml
1
2
3
4
5
dependencies:
cupertino_icons: ^1.0.2
flutter:
sdk: flutter
flutter_riverpod: ^2.3.6
Tada! Kamu sudah berhasil menginstall riverpod prend.
Membuat Layout
Kita akan membuat layout sederhana dengan label counter di tengah dan floating action button di bawah kanan untuk menambah counter.
Edit file lib/main.dart dengan kode berikut
Penjelasan kode:
_ConsumerStatefulWidget_
dan_ConsumerState_
adalah widget yang disupport oleh flutter_riverpod yang fungsinya sama denganStatefulWidget
- Jangan lupa untuk import library
flutter_riverpod
Tips
Karena sudah menginstall plugin snipped flutter, kamu tinggal nulis stfulConsumer dan tekan tab, maka otomatis akan membuat struktur ConsumerStatefulWidget
Snipped biar ga perlu menghafal syntax
Membuat Model
Ketika membuat model, kita akan memanfaatkan library tambahan untuk membantu memudahkan kita membuat class dengan syntax yang lebih pendek yaitu dengan freezed dan freezed_annotation. Pada gambar di bawah ini adalah contoh ketika menggunakan freezed (sebelah kanan), struktur class otomatis akan digenerate ke file .freezed.dart dan .g.dart
Perbedaan tanpa freezed dan dengan freezed
Saya akan membahas lebih detail penggunaannya di lain waktu. Untuk saat ini kamu bisa edit pubspec.yaml
dengan kode berikut
1
2
3
4
5
6
7
8
9
10
dependencies:
build_runner: ^2.4.5
cupertino_icons: ^1.0.2
flutter:
sdk: flutter
flutter_riverpod: ^2.3.6
freezed: ^2.3.5
freezed_annotation: ^2.2.0
json_annotation: ^4.8.1
json_serializable: ^6.7.0
Jalankan di terminal (Kalau di vscode sudah otomatis)
1
flutter pub get
Kemudian buat file di lib/model/counter_model.dart
Penjelasan kode:
part ‘counter_model.freezed.dart’
danpart ‘counter_model.g.dart’
akan membuat file baru yang berisi hasil konversifreezed class
menjadi format class Flutter_@Default(0)_
akan memberikan nilai default 0 ketika counter tidak diinisiasi sebuah value_int counter_
adalah format dari atribut classCounterModel
yaitu {tipe_data} dan {nama_atribut}_CounterModel.fromJson_
akan membuat fungsi untuk mengkonversi data json menjadi classCounterModel
berdasarkan atribut yang sudah diset
Tips
Karena sudah menginstall plugin snipped flutter, kamu tinggal nulis frc dan tekan tab, maka otomatis akan membuat struktur freezed class
Membuat Provider
Setelah membuat model, selanjutnya adalah membuat provider di lib/provider/counter_provider.dart
Penjelasan kode:
StateNotifier
danStateNotifierProvider
untuk menangani state dengan data yang lebih kompleks, misalnya seperti CounterModel ataupun model lain yang punya banyak atribut- Atribut dari
CounterModel
seperticounter
secara otomatis dapat diakses dalam class CounterNotifier - Tiap perubahan
state
di dalamCounterNotifier
**tidak secara otomatis merebuild UI, dibutuhkan listener. Dimana dalam kasus ini adalahStateNotifierProvider
yang disimpan dalam variabel counterProvider. Seperti pada gambar di bawah, ketika user mengklik tombol + yang memanggil fungsi increment(), secara otomatis statecounter
akan bertambah +1 dan UI akan direbuild ulang
Flow ketika fungsi increment() dipanggil di UI
Memasang Riverpod di Layout
Selanjutnya, ubah file lib/main.dart menjadi seperti kode di bawah
Penjelasan kode:
final counterRepo = ref.read(counterProvider.notifier)
untuk memanggil semua method yang sudah didefinisikan di CounterNotifier. Kenapa pakai .read? Karena kita hanya memanggil class tersebut sekali saja ketika komponen sudah berhasil diload- Berbeda dengan
final counterState = ref.watch(counterProvider)
yang akan melakukan subscribe ke counterProvider. Mirip seperti kita subscribe ke channel Youtube, ketika ada video baru, maka kita akan otomatis dapet notifikasinya juga.
Flow counterRepo dan counterState
Hasil Akhir
Berikut ini adalah hasil akhir penggunaan dari Riverpod dengan studi kasus counter app. Pada artikel berikutnya, saya akan berbagi bagaimana penggunaan Riverpod dengan studi kasus Todo List.
Kamu bisa mengunduh seluruh kodenya disini prend.
https://github.com/iniakunhuda/tutorial_riverpod_counter_app
🔥 TantanganTambahkan tombol untuk mengurangi state
_counter_
di bawah tombol plus dan panggil fungsi .decrement()