Kegunaan

ChangeNotifier digunakan untuk menyimpan app state. ChangeNotifier memberikan Observer Pattern dimana kita bisa meng-“subscribe” widget untuk mendapatkan update ketika terjadi perubahan state.

ChangeNotifier class

Sebagai contoh, anggap kita ingin menyimpan state berapa kali seorang user menekan sebuah button di app menggunakan sebuah class. Kita namakan class tersebut sebagai CounterModel:

import 'package:provider/provider.dart';

class CounterModel extends ChangeNotifier {
  int counter = 0;

  void inc() {
    counter += 1;
    notifyListeners();
  }
}

Beberapa hal yang perlu diperhatikan:

• Harus meng-import package provider/provider.dart
• Class yang akan menyimpan state tersebut harus meng-extend ChangeNotifier
• notifyListeners() harus dipanggil jika kita ingin memberitahu semua widget yang subscribe bahwa telah terjadi perubahan state.

Menghubungkan widget dengan state

Agar dapat menggunakan state object di dalam widget, kita perlu membungkus widget tersebut di dalam class Consumer<YourClass> . Sebagai contoh, jika kita ingin menghubungkan sebuah tombol ke state diatas:

class MyButton extends StatefulWidget {
  const MyButton({super.key});

  @override
  State<MyButton> createState() => MyButtonState();
}

class MyButtonState extends State<MyButton> {
  @override
  Widget build(BuildContext context) {
    return Consumer<CounterModel>(
      builder: (context, notifier, child) => 
        ElevatedButton(
          onPressed: () => {
            notifier.inc()
          }, 
          child: const Text('I like this button'),
        )
    );
  }
}

Dapat kita lihat bahwa method build dari class MyButton mengembalikan widget Consumer<CounterModel> yang didalamnya berisi sebuah tombol. Tombol tersebut akan memanggil method inc() di dalam object dari class CounterModel.

Selanjutnya, widget yang memiliki tipe Consumer<T> hanya bisa di-instansiasi menggunakan ChangeNotifierProvider. Ini disebabkan widget tersebut harus terhubung dengan suatu object ChangeNotifier. Sehingga, untuk menggunakan widget MyButton:

ChangeNotifierProvider(
  create: (context) => CounterModel(),
  child: const MyButton(),
),

Perhatikan bahwa kamu tidak bisa meng-instansiasi MyButton tanpa menghubungkannya dengan sebuah object CounterModel. Jika dilakukan, maka akan mendapatkan error ProviderNotFoundException