ChangeNotifierProvider<NotifierT extends ChangeNotifier?> constructor

ChangeNotifierProvider<NotifierT extends ChangeNotifier?>(NotifierT _createFn(Ref ref), { String? name, Iterable<ProviderOrFamily>? dependencies, bool isAutoDispose = false, Retry? retry, })

Creates a ChangeNotifier and exposes its current state.

Combined with ChangeNotifier, ChangeNotifierProvider can be used to manipulate advanced states, that would otherwise be difficult to represent with simpler providers such as Provider or FutureProvider.

For example, you may have a todo-list, where you can add and remove and complete a todo. Using ChangeNotifier, you could represent such state as:

class TodosNotifier extends ChangeNotifier {
  List<Todo> todos = [];

  void add(Todo todo) {
    todos.add(todo);
    notifyListeners();
  }

  void remove(String todoId) {
    todos.removeWhere((todo) => todo.id == todoId);
    notifyListeners();
  }

  void toggle(String todoId) {
    final todo = todos.firstWhere((todo) => todo.id == todoId);
    todo.completed = !todo.completed;
    notifyListeners();
  }
}

Which you can then pass to a ChangeNotifierProvider like so:

final todosProvider = ChangeNotifierProvider<TodosNotifier, List<Todo>>((ref) => TodosNotifier());

And finally, you can interact with it inside your UI:

Component build(BuildContext context) {
  // rebuild the widget when the todo list changes
  List<Todo> todos = context.watch(todosProvider).todos;

  return div([
    for (final todo in todos)
      CheckboxListTile(
         value: todo.completed,
         // When tapping on the todo, change its completed status
         onChanged: (value) => context.read(todosProvider.notifier).toggle(todo.id),
         title: Text(todo.description),
      ),
  ]);
}

Implementation

ChangeNotifierProvider(
  this._createFn, {
  super.name,
  super.dependencies,
  super.isAutoDispose = false,
  super.retry,
}) : super(
       $allTransitiveDependencies: computeAllTransitiveDependencies(
         dependencies,
       ),
       from: null,
       argument: null,
     );