Provider and ChangeNotifier

Why Provider?

Provider wraps InheritedWidget in an easy API. It is used in many production apps, has been recommended in the Flutter documentation's simple state management guide, and is a good first state management tool to learn. Add it with flutter pub add provider.

The idea has three parts. A model class holds the shared data and the methods that change it. A provider widget makes one instance of that model available to everything below it in the tree. Widgets that need the data read it from context, and widgets that display it are rebuilt automatically when the model announces a change.

ChangeNotifier is a small class from Flutter's foundation library. It keeps a list of listeners; calling notifyListeners() tells all of them "something changed". Provider registers the widgets that watch the model as listeners, so you never call setState yourself for shared data.

Step 1: a ChangeNotifier model

import 'package:flutter/foundation.dart';

class CartItem {
  const CartItem(this.name, this.price);
  final String name;
  final int price;
}

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

  List<CartItem> get items => List.unmodifiable(_items);    // read-only view
  int get count => _items.length;
  int get total => _items.fold(0, (sum, i) => sum + i.price);

  void add(CartItem item) {
    _items.add(item);
    notifyListeners();                                       // tell listeners to rebuild
  }

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

Step 2: provide it above the widgets

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CartModel(),
      child: const ShopApp(),
    ),
  );
}

// Several models:
// MultiProvider(providers: [
//   ChangeNotifierProvider(create: (_) => CartModel()),
//   ChangeNotifierProvider(create: (_) => AuthModel()),
// ], child: const ShopApp())

Step 3: read it

class CartBadge extends StatelessWidget {
  const CartBadge({super.key});
  @override
  Widget build(BuildContext context) {
    final count = context.watch<CartModel>().count;        // rebuilds when the cart changes
    return Badge(label: Text('$count'), child: const Icon(Icons.shopping_cart));
  }
}

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.item});
  final CartItem item;
  @override
  Widget build(BuildContext context) {
    return FilledButton(
      onPressed: () => context.read<CartModel>().add(item),   // read in callbacks: no rebuild needed
      child: const Text('Add to cart'),
    );
  }
}

Consumer and select limit rebuilds: if only the cart badge depends on the count, wrap just the badge, not the whole screen. This matters for performance in big screens.

Keep the business logic, like calculating totals and checking stock, inside the model, not in widgets. Then the same rules apply on every screen, and you can unit test the model without any UI. ChangeNotifierProvider also disposes the model automatically when the provider is removed from the tree.

Common mistakes

• Forgetting notifyListeners(): data changes but the UI does not.
• Using context.watch inside onPressed: an error or warning; use context.read there.
• ProviderNotFoundException: the provider is not above the widget that reads it (for example, provided inside a different route). Move it higher.
• Exposing the mutable list publicly so screens change it without notifying.