Difference between Change Notifier vs Value Notifier in providers?

Overview

Both

ChangeNotifier

ValueNotifier

ValueNotifier

ChangeNotifier

ChangeNotifier

A class that can hold multiple state fields and notify listeners when you explicitly call

notifyListeners()

dartCopy
class CartNotifier extends ChangeNotifier {
  List<CartItem> _items = [];
  double _total = 0.0;
  bool _isLoading = false;

  List<CartItem> get items => _items;
  double get total => _total;
  bool get isLoading => _isLoading;

  void addItem(CartItem item) {
    _items.add(item);
    _total += item.price;
    notifyListeners(); // ← Manually trigger rebuild
  }

  void removeItem(int index) {
    _total -= _items[index].price;
    _items.removeAt(index);
    notifyListeners();
  }

  Future<void> loadItems() async {
    _isLoading = true;
    notifyListeners();
    _items = await CartRepository.fetch();
    _isLoading = false;
    notifyListeners();
  }
}

dartCopy
// Provide it
ChangeNotifierProvider(create: (_) => CartNotifier()),

// Consume it
Consumer<CartNotifier>(
  builder: (context, cart, child) => Text('Items: ${cart.items.length}'),
)

// Or
final cart = context.watch<CartNotifier>();

ValueNotifier

A simplified

ChangeNotifier

dartCopy
// ValueNotifier<T> — wraps a single value
final counter = ValueNotifier<int>(0);
final theme = ValueNotifier<ThemeMode>(ThemeMode.light);
final name = ValueNotifier<String>('Alice');

// Update value — automatically notifies listeners
counter.value++;         // Triggers rebuild
theme.value = ThemeMode.dark;

// Listen
counter.addListener(() {
  print('Counter changed: ${counter.value}');
});

// Dispose when done
counter.dispose();

dartCopy
// Widget
ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) => Text('Count: $value'),
)

Key Differences

notifyListeners()

.value =

Listenable

ChangeNotifier

Consumer

context.watch

ValueListenableBuilder

When to Use Which

ValueNotifier

ValueNotifier

ChangeNotifier

ChangeNotifier

ChangeNotifier

Combined Example

dartCopy
// Use ValueNotifier for simple state inside ChangeNotifier
class ThemeController extends ChangeNotifier {
  final isDark = ValueNotifier<bool>(false);

  void toggle() {
    isDark.value = !isDark.value;
    notifyListeners();
  }
}

Rule: Use

textCopy

ValueNotifier

for simple single-value state. Use

textCopy

ChangeNotifier

when you have complex state with multiple related fields.