Intro to ValueNotifier, a simple yet efficient state management for Flutter apps.

Today, I'd like to talk to you about simple and reactive state management in Flutter with ValueNotifier.

State management is an essential part of building any Flutter application, and there are several state management solutions available, such as Riverpod, Provider, Bloc, Redux, etc. However, in some cases, you may find that these solutions are too complex for your needs, and you'd prefer a simpler and more lightweight option. This is where ValueNotifier comes in.

ValueNotifier is a simple class that extends ChangeNotifier and provides a way to store a single value that can be listened to and updated reactively. It's perfect for simple state management needs and can be used with widgets that need to be rebuilt when the state changes.

Here's a simple implementation example:

import 'package:flutter/material.dart';

class CounterModel extends ValueNotifier<int> {
  CounterModel(int value) : super(value);

  void increment() => value++;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = CounterModel(0);

    return MaterialApp(
      title: 'ValueNotifier Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ValueNotifier Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              ValueListenableBuilder(
                valueListenable: counter,
                builder: (BuildContext context, int value, Widget child) {
                  return Text(
                    '$value',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter.increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

In this example,

• we define a CounterModel class that extends ValueNotifier and provides an increment() method to update the counter value;

• we then create an instance of CounterModel and pass it to the ValueListenableBuilder widget, which listens to changes in the counter value and rebuilds the widget tree whenever the value changes.

Using ValueNotifier is that simple! It's a great choice for small to medium-sized projects where you don't need the complexity of other state management solutions. However, keep in mind that it may not be suitable for larger projects or projects with complex state management needs.

In conclusion, ValueNotifier is a simple and reactive way to manage state in your Flutter applications. It's easy to use and perfect for small to medium-sized projects. If you need something more powerful, there are several other state management solutions available in the Flutter ecosystem.
I'll be writing soon a more advanced use case of the state management with ValueNotifier in real-world projects.