What is ChangeNotifier in Flutter: Simple Explanation and Example

ChangeNotifier in Flutter is a class that helps you manage and notify changes in your app's data. It lets widgets listen for updates and rebuild automatically when the data changes.

How It Works

Imagine you have a whiteboard that shows some information. When the information changes, you want everyone looking at the whiteboard to know immediately so they can update what they see. ChangeNotifier works like that whiteboard. It holds data and lets other parts of your app watch it.

When the data changes, ChangeNotifier tells all its listeners to update. This way, your app stays in sync without you having to manually refresh every widget. It’s like having a helpful friend who shouts "Hey, this changed!" so everyone can react.

Example

This example shows a simple counter app using ChangeNotifier. When you press the button, the counter increases and the text updates automatically.

dart

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ChangeNotifier Example')),
        body: Center(
          child: AnimatedBuilder(
            animation: counter,
            builder: (context, child) {
              return Text('Count: ${counter.count}', style: TextStyle(fontSize: 30));
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.increment,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Output

A screen with text "Count: 0" in the center and a plus button. Each tap on the button increases the number shown.

When to Use

Use ChangeNotifier when you want to keep your app's data and UI in sync simply and efficiently. It works well for small to medium apps or parts of apps where you need to update UI based on data changes.

For example, use it to manage user settings, counters, form inputs, or simple lists. It’s great when you want to avoid rebuilding the whole app and only update parts that depend on the changed data.

Key Points

• ChangeNotifier holds data and notifies listeners when data changes.
• Widgets listen to it and rebuild automatically on updates.
• It’s simple and good for managing small to medium state.
• Use notifyListeners() to tell listeners about changes.
• Works well with AnimatedBuilder or ChangeNotifierProvider in Provider package.

Key Takeaways

ChangeNotifier lets widgets listen and react to data changes automatically.

Call notifyListeners() inside ChangeNotifier to update listeners.

Ideal for simple state management in Flutter apps.

Works well with AnimatedBuilder or Provider for UI updates.

Helps keep UI and data in sync without manual refresh.