flutter-change-notifier

Flutter ChangeNotifier Skill

This skill defines how to correctly use ChangeNotifier with the provider package for state management in Flutter.

---

1. Model

Extend ChangeNotifier to manage state. Keep internal state private and expose unmodifiable views. Call notifyListeners() on every state change.

class CartModel extends ChangeNotifier {
  final List<Item> _items = [];

  UnmodifiableListView<Item> get items => UnmodifiableListView(_items);

  void add(Item item) {
    _items.add(item);
    notifyListeners();
  }

  void removeAll() {
    _items.clear();
    notifyListeners();
  }
}

• Place shared state above the widgets that use it in the widget tree.
• Never directly mutate widgets or call methods on them to change state — rebuild widgets with new data instead.

---

2. Providing the Model

ChangeNotifierProvider(
  create: (context) => CartModel(),
  child: MyApp(),
)

• ChangeNotifierProvider automatically disposes of the model when it is no longer needed.
• Use MultiProvider when you need to provide multiple models:

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => CartModel()),
    ChangeNotifierProvider(create: (_) => UserModel()),
  ],
  child: MyApp(),
)

---

3. Consuming State

Consumer

Consumer<CartModel>(
  builder: (context, cart, child) => Stack(
    children: [
      if (child != null) child,
      Text('Total price: ${cart.totalPrice}'),
    ],
  ),
  child: const SomeExpensiveWidget(), // rebuilt only once
)

• Always specify the generic type (Consumer<CartModel>, not Consumer).
• Use the child parameter to pass widgets that don't depend on the model — they are built once and reused.
• Place Consumer widgets as deep in the widget tree as possible to minimize the scope of rebuilds:

HumongousWidget(
  child: AnotherMonstrousWidget(
    child: Consumer<CartModel>(
      builder: (context, cart, child) {
        return Text('Total price: ${cart.totalPrice}');
      },
    ),
  ),
)