Tutorial Flutter Riverpod: Studi kasus counter app

Part of Tutorial Riverpod Bahasa Indonesia

Halo prend, 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

https://riverpod.dev/

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~

Setup

Buat project flutter terlebih dahulu dengan nama riverpod_counter_app

flutter create riverpod_counter_app

Setelah itu buka project dengan vscode

cd riverpod_counter_app
code .

File main.dart dari Flutter

Jalankan emulator, disini saya pakai iOS Simulator. Setelah itu, run aplikasi dengan menekan F5.

Command + Shift + P (Mac)

Instalasi Plugin Flutter di VSCode

Ada beberapa rekomendasi plugin yang bisa kamu install untuk mempercepat proses development aplikasi Flutter kamu, antara lain:

• Flutter
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• Flutter Widget Snippets
  https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets
• Flutter Riverpod Snippets
  https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets
• Pubspec Assist
  https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist

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

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.

Layout aplikasi counter app

Edit file lib/main.dart dengan kode berikut

Penjelasan kode:

• ConsumerStatefulWidget dan ConsumerState adalah widget yang disupport oleh flutter_riverpod yang fungsinya sama dengan StatefulWidget
• Jangan lupa untuk import library flutter_riverpod

💡 Tips
Karena sudah menginstall plugin snipped flutter, kamu tinggal nulisstfulConsumer 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

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)

flutter pub get

Kemudian buat file di lib/model/counter_model.dart

Penjelasan kode:

• part ‘counter_model.freezed.dart’ dan part ‘counter_model.g.dart’ akan membuat file baru yang berisi hasil konversi freezed class menjadi format class Flutter
• @Default(0) akan memberikan nilai default 0 ketika counter tidak diinisiasi sebuah value
• int counter adalah format dari atribut class CounterModel yaitu {tipe_data} dan {nama_atribut}
• CounterModel.fromJson akan membuat fungsi untuk mengkonversi data json menjadi class CounterModel 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 dan StateNotifierProvider untuk menangani state dengan data yang lebih kompleks, misalnya seperti CounterModel ataupun model lain yang punya banyak atribut
• Atribut dari CounterModel seperti counter secara otomatis dapat diakses dalam class CounterNotifier
• Tiap perubahan state di dalamCounterNotifier tidak secara otomatis merebuild UI, dibutuhkan listener. Dimana dalam kasus ini adalah StateNotifierProvider yang disimpan dalam variabel counterProvider. Seperti pada gambar di bawah, ketika user mengklik tombol + yang memanggil fungsi increment(), secara otomatis state counter 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.

GitHub - iniakunhuda/tutorial_riverpod_counter_app: Tutorial Riverpod Counter App

🔥 Tantangan
Tambahkan tombol untuk mengurangi state counter di bawah tombol plus dan panggil fungsi .decrement()

Terima kasih, semoga bermanfaat!
Kalau masih ada yang bingung, feel free tanyain aja 😄

Miftahul Huda adalah seorang mobile developer yang senang berbagi tutorial iOS SwiftUI dan Flutter. Huda juga memiliki pengalaman di bidang fullstack web development selama 3 tahun lebih. Selain menulis, Huda juga aktif berkontribusi di komunitas teknologi antara lain GDG Surabaya & SurabayaDev