# Flutter Change Notifier

Use when setting up ChangeNotifier models, providing them to the widget tree, consuming...

- Repository: https://github.com/evanca/flutter-ai-rules (668 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add evanca/flutter-ai-rules --skill flutter-change-notifier -g -a claude-code -y`
Codex: `npx skills add evanca/flutter-ai-rules --skill flutter-change-notifier -g -a codex -y`
Cursor: `npx skills add evanca/flutter-ai-rules --skill flutter-change-notifier -g -a cursor -y`
Gemini CLI: `npx skills add evanca/flutter-ai-rules --skill flutter-change-notifier -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add evanca/flutter-ai-rules`

## Description

Use when setting up ChangeNotifier models, providing them to the widget tree, consuming state with Consumer or Provider.of, or optimizing rebuilds.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

```dart
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

```dart
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:

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

---

## 3. Consuming State

### Consumer

```dart
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:

The rest: https://github.com/evanca/flutter-ai-rules/blob/HEAD/skills/flutter-change-notifier/SKILL.md