Custom ValueNotifier in Flutter – With Examples

In Flutter to maintain State, we use several solutions, out of these solutions the most popular ones are GetX, ValueNotifier, ChangeNotifier, Streams, BLoC, Provider, RiverPod, etc. Amongst all these solutions we are discussing ValueNotifier as it is a Native Solution to State Management in Flutter.

We have already discussed ValueNotifier in a previous post. In this post, we will take a look at Custom ValueNotifier in Flutter. Let’s first look at why would we need a Custom ValueNotifier:

• To encapsulate data with related functions.
• Abstraction between data-related logic and UI logic.
• Provide custom functions to modify and transform the data.

Basics of Custom ValueNotifier in Flutter ❇

To create a ValueNotifier generally, we declare it in one line like this:

Syntax:
ValueNotifier<T> valueNotifier = ValueNotifier<T>(defaultValue);

Eg:
ValueNotifier<int> valueNotifier = ValueNotifier<int>(0);

By default we can directly interact with the value of the notifier like this:

Modify an <int> ValueNotifier:
- valueNotifier.value = 10;
- valueNotifier.value++;
- valueNotifier.value--;

As you can see we are able to interact with the ValueNotifier value. However, we have to declare all these statements again and again in the front-end. If we want to declare all these functionalities as functions and bind them to the ValueNotifier class, then we need to create our custom ValueNotifier. We extend ValueNotifier class like this:

Following you can see a live example of how to create a Custom ValueNotifier class in Flutter:

import 'dart:math';
import 'package:flutter/material.dart';

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

  void increment() {
    value++;
  }

  void decrement() {
    value--;
  }

  void performSomeCalcuations() {
    value = pow(value, 2).toInt();
  }

  void reset() {
    value = -1;
  }
}

As you can see we can easily modify our data using functions when we extend ValueNotifier to any class. In the class, we can access the current value of ValueNotifier<T> using the value keyword. You might notice that value is not declared anywhere as it is provided by the ValueNotifier class itself.

We can simply consume this class as we would consume any ValueNotifier. We use the ValueListenableBuilder to consume our custom ValueNotifier.

Consuming Custom ValueNotifier in Flutter 🥟

We can consume our ValueNotifier using AnimatedBuilder or using ValueListenableBuilder. Now let’s take a look at how to consume our Custom ValueNotifier using ValueListenableBuilder in Flutter:

import "package:flutter/material.dart";

class CustomValueNotifierExample extends StatefulWidget {
  const CustomValueNotifierExample({Key? key}) : super(key: key);

  @override
  State<CustomValueNotifierExample> createState() =>
      _CustomValueNotifierExampleState();
}

// 1 
final MyNotifier myNotifier = MyNotifier(0);

class _CustomValueNotifierExampleState
    extends State<CustomValueNotifierExample> {
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder( // 2 
      valueListenable: myNotifier,
      builder: (context, value, child) {
        return Scaffold(
          floatingActionButton: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FloatingActionButton(
                onPressed: () => myNotifier.performSomeCalcuations(),// 3 
                child: const Icon(Icons.arrow_circle_up),
              ),
              const SizedBox(width: 10),
              FloatingActionButton(
                onPressed: () => myNotifier.increment(),// 4 
                child: const Icon(Icons.plus_one),
              ),
              const SizedBox(width: 10),
              FloatingActionButton(
                onPressed: () => myNotifier.reset(),// 5 
                child: const Icon(Icons.restore_page),
              ),
            ],
          ),
          body: Center(
            child: Text(value.toString()), // 6 
          ),
        );
      },
    );
  }
}

Step by Step Explanation:

1. Firstly we create a singleton instance of our Custom ValueNotifier.
2. Here, we consume our notifier using the ValueListenableBuilder.
3. In Steps 3, 4, 5, and 6 we use the methods described in our Custom ValueNotifier.

If we want to consume the ValueNotifier, there are two ways:

1. Using Singleton instance, if the ValueNotifier is needed across two or more pages. In the above example, we are using the singleton instance.
2. Creating an instance only when needed, limited to Widget scope.

Disposing of the ValueNotifier 🦞

After we are done consuming our Custom ValueNotifier object, it is a must to dispose of the ValueNotifier. After you dispose of the ValueNotifier it cannot be used anymore. So ensure that you don’t need the ValueNotifier on any other page.

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

Conclusion 🌄

In this post, we looked at the basics of ValueNotifier and ValueListenableBuilder. We discussed how to create a custom ValueNotifier to implement your needs. ValueNotifier is a native feature to Flutter, i.e you don’t need to add any dependencies to use it, that’s the reason why it’s preferred in Flutter Development.

Now that you know about Custom ValueNotifiers in Flutter, you should check these posts next:

• Complete guide to Testing in Flutter
• StreamBuilder in Flutter
• Null Safety in Dart, Flutter Essentials
• App Lifecycle in Flutter

If you have any queries you can comment below and I will be happy to help you. If you are new to Flutter check my post on how to install Flutter on windows?