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.

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.