State Management Sederhana: ChangeNotifier

Berbagi data antar widget dengan ChangeNotifier dan ListenableBuilder tanpa paket tambahan.

Part 22 dari 23 ± 45 menit Gratis

Masalahnya: banyak widget butuh data yang sama

Bayangkan keranjang belanja. Tombol "Tambah" ada di halaman produk, sedangkan ikon jumlah ada di AppBar. Dua widget berbeda, satu data. Jika data disimpan di salah satunya, yang lain tidak tahu bila isinya berubah. Menyimpan data di tempat bersama dan memberi kabar ke semua pendengar disebut state management.

Cara paling sederhana: ChangeNotifier

Flutter menyediakan ChangeNotifier: class yang bisa "mengumumkan" bahwa isinya berubah. Analoginya grup WhatsApp: ketika ada pesan baru, semua anggota diberi tahu.

class KeranjangModel extends ChangeNotifier {
  final List<String> _item = [];

  List<String> get item => List.unmodifiable(_item);

  void tambah(String nama) {
    _item.add(nama);
    notifyListeners();      // umumkan: "ada perubahan!"
  }
}
  • _item bersifat privat; dari luar hanya bisa dibaca lewat getter item (versi yang tidak bisa diubah), dan diubah lewat method tambah. Dengan begitu perubahan selalu melewati satu pintu.
  • notifyListeners() memberi tahu semua widget yang "mendengarkan" model ini.

Mendengarkan perubahan: ListenableBuilder

final keranjang = KeranjangModel();      // satu objek bersama

ListenableBuilder(
  listenable: keranjang,
  builder: (context, child) {
    return Text('Jumlah: ${keranjang.item.length}');
  },
)

Setiap kali notifyListeners() dipanggil, builder dijalankan ulang dan tampilan diperbarui. Widget lain boleh memanggil keranjang.tambah('Kopi') tanpa perlu setState.

Satu objek, banyak widget

Perhatikan: TombolTambah dan BadgeJumlah adalah widget terpisah, tetapi memakai objek yang sama. Tombol mengubah data, badge menampilkannya. Pada aplikasi besar, objek bersama ini biasanya "diantarkan" ke widget lewat paket seperti Provider atau Riverpod, tetapi prinsipnya sama persis dengan yang kamu pelajari di sini.

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X