CabbageApps

🚀 Flutter 101: Guide to reactive programming with ChangeNotifier, ValueNotifier, and StateNotifier

If you're new to Flutter and looking to learn reactive programming, then this tutorial is for you! In this post, we will explore three classes provided by the Flutter Foundation library that help us build reactive applications - ChangeNotifier, ValueNotifier, and StateNotifier.

For the sake of simplicity, we will build the iconic Flutter counter app using all three classes. Let's get started!

👉 Installing the dependencies
To use these classes, we need to add some dependencies to our `pubspec.yaml` file. We will be using the `state_notifier` package and `flutter_riverpod` to provide some classes to the widget tree.

💡 Note: If you use flutter_riverpod, you don’t need to install the state_notifier package since it comes with the StateNotifier class.

state_notifier: ^0.7.2+1
flutter_riverpod: ^1.0.4

👉 ChangeNotifier
ChangeNotifier works by providing change notifications to its listeners. It provides the method `notifyListeners` which we can call whenever we want to notify the listeners of any changes. Let's see how we can use it to implement the counter app.

First, we will create the 'MyCounter` class that will hold the `count` value and methods to increment and decrement the count.

class MyCounter extends ChangeNotifier {
int count = 5;

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

void decrement() {
count--;
notifyListeners();
}
}

Next, we will create a global provider using `ChangeNotifierProvider` from `flutter_riverpod`.

final counterProvider = ChangeNotifierProvider((ref) => MyCounter());

Finally, we will create the `CounterWidget` responsible for displaying the count, increment, and decrement the count, as displayed in the graphic.

👉 ValueNotifier
ValueNotifier is similar to ChangeNotifier but works for a single value. It provides the method `value` to get and set the value. Let's see how we can use it to implement the counter app.

First, we will create a `ValueNotifier` variable to hold the count value.

final count = ValueNotifier(5);

Next, we will create the `CounterWidget` responsible for displaying the count, increment, and decrement the count.

class CounterWidget extends StatelessWidget {
const CounterWidget({Key? key}) : super(key: key);


Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Count: ${count.value}'),
const SizedBox(height: 20),
Row(

Reactive programming is a key aspect of modern app development, and Flutter provides several classes and packages to help you work with reactive programming in your Flutter applications. And create highly responsive and performant applications that your users will love.

Happy Fluttering