☀️Siang
Mobile Development

State Management Flutter: Riverpod & BLoC

Tutorial lengkap state management Flutter — konsep dasar state, Provider, Riverpod, BLoC pattern, perbandingan solusi, dan contoh kode praktis untuk arsitektur yang bersih

Artikel: Flutter State Management Artikel: Flutter State Management


1. Konsep State Management

Dalam pengembangan aplikasi Flutter, state adalah data yang dapat berubah selama lifecycle aplikasi — mulai dari data pengguna yang sedang login, isi keranjang belanja, hingga status loading halaman. State management yang baik adalah kunci untuk membangun aplikasi yang scalable, testable, dan mudah di-maintain.

Mengapa State Management Penting?

Tanpa State Management Dengan State Management
Data tersebar di banyak widgetData terpusat dan terorganisir
Sulit berbagi data antar widgetKomunikasi antar widget mudah dan terstruktur
Callback hell (prop drilling)Akses data langsung dari sumbernya
Sulit di-testMudah unit test dan mocking
Kode spaghettiArsitektur bersih (Clean Architecture)

Jenis-jenis State dalam Flutter

Diagram: Jenis State dalam Flutter

App State (Shared) • User authentication • Shop...

Ephemeral State (UI State) • Checkbox state • C...

Ephemeral state adalah state lokal yang hanya relevan untuk satu widget tertentu — seperti status expand/collapse. Sedangkan app state adalah state yang perlu dibagikan ke banyak bagian aplikasi — seperti data user atau keranjang belanja.

Prinsip State Management yang Baik

  • Single Source of Truth — setiap data hanya disimpan di satu tempat
  • Unidirectional Data Flow — data mengalir dari sumber ke UI, event dari UI ke sumber
  • Separation of Concerns — UI terpisah dari logika bisnis
  • Immutability — state tidak diubah secara langsung, tetapi di-replace dengan state baru
  • Testability — logika bisnis bisa di-test tanpa UI
💡 Tips

Untuk aplikasi kecil atau halaman sederhana, setState() sudah cukup. Jangan over-engineer dengan BLoC atau Riverpod jika hanya mengelola satu checkbox. Gunakan state management library hanya ketika Anda perlu berbagi state antar banyak widget atau memisahkan logika bisnis.



2. setState & Pendekatan Dasar

setState() adalah metode paling dasar untuk mengelola state di Flutter. Ini bekerja dengan memperbarui variabel internal StatefulWidget dan memberitahu framework untuk membangun ulang widget. Cocok untuk state sederhana yang hanya relevan di satu halaman.

Dasar StatefulWidget

Diagram: Riverpod Data Flow
Riverpod Data Flow

Repository / API

Provider (State) ▶ ◀

UI / Screen ▶ ◀

💡 Riverpod Code Generation

Dengan riverpod_generator, Anda bisa menggunakan anotasi @riverpod untuk menghasilkan provider secara otomatis. Ini mengurangi boilerplate dan menghindari kesalahan typing pada key provider.



5. BLoC Pattern

BLoC (Business Logic Component) adalah pattern yang memisahkan business logic dari UI menggunakan Streams dan Events. BLoC sangat cocok untuk proyek besar dengan banyak developer karena enforce struktur yang konsisten.

Setup BLoC

Diagram: BLoC Data Flow
BLoC Data Flow

Events (Input) ▶

BLoC (Logic)

States (Output) ◀

Reposi- tory



6. Perbandingan Semua Solusi

Aspek setState Provider Riverpod BLoC
Complexity🟢 Rendah🟡 Sedang🟡 Sedang🔴 Tinggi
Learning Curve🟢 Mudah🟢 Mudah🟡 Sedang🔴 Curam
Testability🔴 Sulit🟡 Cukup🟢 Mudah🟢 Sangat Mudah
Boilerplate🟢 Minim🟡 Sedang🟢 Minim🔴 Banyak
Compile Safety🟢 Ya🔴 Runtime🟢 Compile-time🟡 Cukup
Async Support🟡 Manual🟡 AsyncValue🟢 Built-in🟢 Stream
Dependency Injection✅ Sederhana✅ Lengkap✅ Modular
Cocok untukWidget lokalAplikasi kecil-sedangSemua ukuranEnterprise / Tim besar

Kapan Menggunakan Apa?

📌 Rekomendasi Penggunaan
  • setState — Widget tunggal seperti form input, toggle, atau tab indicator
  • Provider — Aplikasi sederhana-menengah, prototyping, atau migrasi dari setState
  • Riverpod — Aplikasi modern, testability tinggi, atau proyek baru dari nol
  • BLoC — Enterprise app, tim besar, atau proyek yang butuh arsitektur sangat terstruktur
💡 Best Practice

Tidak ada "satu solusi yang benar" — yang terbaik adalah yang sesuai dengan kebutuhan dan tim Anda. Untuk proyek baru di 2026, Riverpod adalah pilihan populer karena menggabungkan kemudahan Provider dengan kekuatan compile-time safety dan testability. Jika tim Anda sudah familiar dengan reactive programming, BLoC memberikan struktur yang sangat jelas.



7. Quiz: Uji Pemahamanmu!

Setelah membaca tutorial di atas, jawablah 5 pertanyaan berikut untuk menguji pemahamanmu tentang state management Flutter:

Pertanyaan 1: Apa yang dimaksud dengan "state hoisting" dalam konteks Flutter state management?

a) Menyimpan semua state di dalam StatefulWidget
b) Memindahkan state ke widget parent agar child widget menjadi stateless dan reusable
c) Menyimpan state di dalam database lokal
d) Menghapus state yang tidak digunakan

Pertanyaan 2: Apa perbedaan utama antara Provider dan Riverpod?

a) Provider lebih cepat dari Riverpod
b) Riverpod tidak memerlukan InheritedWidget dan mendukung compile-time safety
c) Provider lebih baru dari Riverpod
d) Riverpod hanya bisa digunakan di web

Pertanyaan 3: Dalam BLoC pattern, apa yang dimaksud dengan "Event"?

a) Output yang ditampilkan di UI
b) Input yang dikirim ke BLoC untuk diproses menjadi state baru
c) Fungsi untuk menginisialisasi BLoC
d) Data yang disimpan di SharedPreferences

Pertanyaan 4: Apa fungsi dari notifyListeners() dalam ChangeNotifier?

a) Menghapus data dari provider
b) Memberitahu semua widget Consumer untuk rebuild dengan state terbaru
c) Menyimpan data ke local storage
d) Menginisialisasi provider baru

Pertanyaan 5: Kapan sebaiknya menggunakan setState() saja tanpa state management library?

a) Untuk semua kasus state management
b) Saat state hanya relevan untuk satu widget lokal dan tidak perlu dibagikan
c) Hanya saat menggunakan Widget yang sangat besar
d) Tidak pernah, selalu gunakan library
🔍 Zoom
100%
🎨 Tema