Macam-Macam State pada Flutter

Pada pengembangan aplikasi menggunakan flutter, salah satu konsep yang perlu kita pahami adalah tentang state atau keaadan. State ini menggambarkan data atau kondisi yang dapat berubah dan mempengaruhi tampilan antarmuka (UI). Dengan kita memahami cara kerja state serta jenis-jenis state, kita sebagai developer mampu membuat aplikasi akan lebih responsi, efesien, dan mudah dikelola.

Apa itu State di Flutter?

Secara sederhana state ini merupakan data yang akan menentukan bagaimana UI ditampilkan pada suatu waktu tertentu. Jika state berubah, maka Flutter akan merender ulang widget agar tampilan sesuai dengan data terbaru.

Contohnya:

Ketika sebuah tombol yang di tekan dan angka yang ada di layar akan bertambah, angka tersebut merupakan bagian dari state.

Jenis – Jenis State Bedasarkan Sifatnya.

1. Ephermeral State (Local State)

Local State merupakan state lokal yang hanya digunakan daam satu widget dan tidak perlu diakses oleh widget lain.

Contoh:

Tombol “Like” yang berubah warna saat kita tekan.
Counter Sederhana
Toggle, Checkbox, form input

Contoh dalam kode:

setState(() {
  counter++;
});

setState(() {
  counter++;
});

Pada kode di atas cocok digunakan untuk state keci dan tidak terlalu kompleks.

2. App State (Shared / Global State)

Berbeda dengan ephemeral state, app state adalah data yang dibutuhkan oleh banyak widget dalam aplikasi.
Contohnya: data pengguna login, tema aplikasi, data keranjang belanja, atau hasil API yang digunakan di beberapa halaman.

Untuk mengelola app state, developer membutuhkan state management tools seperti Provider, Riverpod, atau Bloc.

Pendekatan / Framework State Management di Flutter

Flutter menyediakan banyak cara untuk mengelola state. Berikut ringkasan beberapa metode populer yang digunakan oleh developer:

Pendekatan	Deskripsi Singkat	Kelebihan	Cocok Untuk
setState()	Mengubah state lokal di dalam `StatefulWidget`.	Simpel dan bawaan Flutter.	Proyek kecil dan UI sederhana.
InheritedWidget / InheritedModel	Mengalirkan data ke widget di bawahnya tanpa package tambahan.	Efisien dan built-in.	Menangani data global sederhana.
Provider	Abstraksi di atas InheritedWidget dengan notifikasi perubahan otomatis.	Populer, mudah digunakan.	Aplikasi menengah hingga besar.
Riverpod	Versi modern Provider tanpa `BuildContext`.	Modular, aman, mudah diuji.	Aplikasi kompleks.
Bloc / Cubit	Pola arsitektur dengan pemisahan Business Logic.	Terstruktur, cocok untuk tim besar.	Aplikasi enterprise-level.
GetX	Pendekatan reaktif dengan kode minimal.	Cepat, sederhana.	Aplikasi kecil–menengah.
MobX	Pendekatan reactive programming seperti di React.	Otomatis dan deklaratif.	Developer yang terbiasa dengan observables.
Redux	Single source of truth (satu pusat data).	Prediktif dan konsisten.	Proyek besar dengan banyak kolaborator.

Cara Memilih State Management yang Tepat

Pemilihan metode state tergantung pada skala dan kompleksitas aplikasi. Berikut panduannya:

Kebutuhan	Pilihan Terbaik
Aplikasi kecil, UI sederhana	`setState()` atau `Provider`
Aplikasi menengah dengan data global	`Provider` atau `Riverpod`
Aplikasi besar dan tim banyak	`Bloc` atau `Riverpod`
Aplikasi reaktif cepat	`GetX`
Gaya deklaratif dengan observables	`MobX`

Contoh Implementasi Sederhana

`setState()`

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  void increment() => setState(() => count++);

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  void increment() => setState(() => count++);

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

`Provider`

class Counter extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }
}

class Counter extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }
}

`Bloc / Cubit`

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

Kesimpulan

State merupakan jantung dari interaktivitas di Flutter. Dengan memahami perbedaan antara local state dan global state, serta mengenal berbagai pendekatan seperti Provider, Bloc, atau Riverpod, developer dapat memilih solusi paling efisien sesuai kebutuhan aplikasi.

Ingatlah prinsip penting Flutter: