Learn Updating State with ChangeNotifier

When building reactive Flutter apps, you need a way to update your UI whenever your data changes. This is where ChangeNotifier comes in. ChangeNotifier is a simple class that provides change notification to its listeners. It is commonly used in combination with Provider to manage app state and trigger UI updates.

The key method in ChangeNotifier is notifyListeners. When you call this method, all widgets listening to the notifier are rebuilt, reflecting the latest state. This pattern allows you to separate your UI from your business logic, making your code cleaner and easier to maintain.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// The ChangeNotifier class that manages the counter state.
class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies listeners to rebuild.
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterNotifier(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Listen to changes in CounterNotifier.
    final counter = context.watch<CounterNotifier>();

    return Scaffold(
      appBar: AppBar(title: const Text('Counter Example')),
      body: Center(
        child: Text(
          'Count: [1m${counter.count}[22m',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

You use a CounterNotifier class that extends ChangeNotifier. The counter value is stored in a private variable, and you expose it with a getter. When the increment method is called, the counter is increased and notifyListeners is called. This triggers any widgets listening to CounterNotifier (like the CounterScreen) to rebuild and display the updated count.

The ChangeNotifierProvider is set up at the root of your app, making the notifier available to all descendant widgets. In the CounterScreen, you use context.watch<CounterNotifier>() to listen for changes. When you tap the floating action button, the increment method is called, and the UI updates automatically because notifyListeners was triggered.

Note

This approach ensures that your UI always reflects the current state, and you do not need to manually manage widget rebuilding. By using ChangeNotifier and notifyListeners, you keep your state logic separate from your UI, making your code more organized and maintainable.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how to implement a custom ChangeNotifier in Flutter?

What are some best practices for using ChangeNotifier with Provider?

How does ChangeNotifier compare to other state management solutions in Flutter?

Swipe to show menu

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
            
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// The ChangeNotifier class that manages the counter state.
class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies listeners to rebuild.
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CounterNotifier(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Listen to changes in CounterNotifier.
    final counter = context.watch<CounterNotifier>();

    return Scaffold(
      appBar: AppBar(title: const Text('Counter Example')),
      body: Center(
        child: Text(
          'Count: [1m${counter.count}[22m',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4