Flutter Application will always require state management, Now the debate is still on for what the best state management is but I would like to introduce you to valueNotifier and ValueListenerBuilder, They are both built-in statement management, which means that you do not have to install anything to use them as long as you have flutter properly installed.

If you have watched the video below and still do not understand how to use ValueNotifier and ValueListenableBuilder then this article is for you

Difficulty Level: Easy

In Flutter you can easily set a variable like this

String _name = 'John'

Before we go on, let me clarify a few things here for you

DATA TYPE = String

VARIABLE NAME = _name

The data type can be thought of as a container, it represents the kind of information it should store, there are data-types like int, double, boolean etc. For the sake of clarity let me explain with an analogy

Let us assume you have a small garage that can only contain one car, you can not put two cars nor can you park a truck in it, this is because the garage can only hold one sedan car and that is the datatype we are talking about, you can not put what it is not going to expect, it will fall. Data types would tell you what should be in it and how much it can hold

This is what you would see in Flutter apps upon creation and it uses setState to change its state but this has been under much criticism as it tends to rebuild your whole application.

The alternative tosetState which would solve the rebuilding problem is the combination of ValueNotifier and ValueListenableBuilder

What is ValueNotifier

"ValueNotifier is a class provided by the Flutter framework that helps manage and notify listeners about changes to a value. It serves as a container for holding a value and allows us to track and update that value over time"

In simpler terms, ValueNotifier is a special container that can keep the value of a variable but it does not just stop there, it also keeps track of what that value is, when it has changed and it alerts your app to make the changes where it has deemed fit. Going back to our previous example, Imagine our previous garage is now a smart garage and it can tell when the car is in the garage, what color of the car is in the garage, and what brand of car. etc. It is just a lot smarter and can give an update to a section of our app without rebuilding the whole app

How does it work

To get started with ValueNotifier, you have to wrap your data type with ValueNotifier

ValueNotifier<String?> _name = ValueNotifier<String?>(null);

In this case, The data type is a String that can accept null while the variable name is _name and it has been set to null.

Next, we are going to put a ValueListenerBuilder on the variable which we would be listening to for changes. It should look like this.

                ValueListenableBuilder(
                  valueListenable: _name, // The valueNotifier it should listen to for changes
                  builder: (BuildContext context, String? value, child) {
                    return Text(
                      value ?? 'we dont know', // Give the value if it is not null, if it null then write we dont know. this is utilizing null operators in flutter
                      style: TextStyle(
                        fontSize: 50,
                        fontWeight: FontWeight.bold,
                      ),
                    );
                  },
                ),

In the code above, only this section of the code will be rebuilt when a change occurs and not the entire app.

As of now, Our app is still static and you would not be able to tell that it is using the ValueNotifier, so we are going to add a button to make it change the text from we don't know to John.

The _name variable controls the text on the screen and since we set it to null initially, it is showing we don't know, it will only change to the value of _name when it is not null so we have to make our button change the value of _name from null to a string value. we can achieve that by

onPressed: ()=> _name.value = 'John',

it is as simple as writing the variable name with a suffix of .value and then using the = sign to assign it to a value of the stated type which in our case is string

Lastly, You should always dispose of ValueNotifiers when they are not in use, It is a good practice and it will free up your resources.

 @override
    void dispose() {
      _name.dispose();
      super.dispose();
  }

That will be all for today, I hope after this session you can now use VALUENOTIFIER AND VALUELISTENERBUILDER in Flutter effectively. You can find the complete source code for this tutorial in the Github repository below.