Explore ValueListenableBuilder in Flutter

Introduction

In this blog, we shall explore how to use the ValueListenableBuilder widget. It is an amazing widget. It builds the widget every time the valueListenable value changes. Its values remain synced with there listeners i.e. whenever the values change the ValueListenable listen to it. It updates the UI without using setState() or any other state management technique.

---

Properties:

1. valueListenable:
2. builder:
3. child:

These are the three properties of ValueListenableBuilder. bulder build widget depending upon the valueListenable value. valueListenable is an instance of ValueNotifier . child property is optional, it can be null if valueListenable value entirely depends upon the builder widget.

Example:

• Creating a AppValueNotifier class.

class AppValueNotifiier{}

• ValueNotifier

class AppValueNotifiier{
  ValueNotifier valueNotifier = ValueNotifier(0);
}

• Creating an increment function

class AppValueNotifier{
  ValueNotifier valueNotifier = ValueNotifier(0);

  void incrementNotifier() {
    valueNotifier.value++;
  }  
}

• Creating an object of AppValueNotifier

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  AppValueNotifier appValueNotifier = AppValueNotifier();

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

• Initializing ValueListenableBuilder

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  AppValueNotifier appValueNotifier = AppValueNotifier();

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: appValueNotifier.valueNotifier,
      builder: (context, value, child) {
        return Text(value.toString());
      },
    );
  }
}

• Using increment function

Scaffold(
  body: ValueListenableBuilder(
    valueListenable: appValueNotifier.valueNotifier,
    builder: (context, value, child) {
      return Text(value.toString());
    },
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      appValueNotifier.incrementNotifier();
    },
  ),
);

Using multiple ValueListenableBuilder, listening more than one value:

• To use multiple ValueListenableBuilder , we will create the following ValueNotifier:

ValueNotifier incrementValueNotifier = ValueNotifier(10);
ValueNotifier decrementValueNotifier = ValueNotifier(0);
ValueNotifier colorValueNotifier = ValueNotifier(false);
ValueNotifier subtractValueNotifier = ValueNotifier(0);

• Creating multiple function to perform various action:

void decrementNotifier() {
  decrementValueNotifier.value = decrementValueNotifier.value - 3;
}

void colorNotifier() {
  colorValueNotifier.value = !colorValueNotifier.value;
}

void operation() {
  subtractValueNotifier.value =
      incrementValueNotifier.value + decrementValueNotifier.value;
}

void incrementNotifier() {
  incrementValueNotifier.value++;
}

We have created two valueNotifier for increment and decrement, one for color, and one for subtraction operation. We will change the color of the container, the increment and decrement counters, and the substation of both the counters.

• Nested ValueListenableBuilder

ValueListenableBuilder(
    valueListenable: appValueNotifier.incrementValueNotifier,
    builder: (context, increment, _) => ValueListenableBuilder(
        valueListenable: appValueNotifier.decrementValueNotifier,
        builder: (context, decrement, _) => ValueListenableBuilder(
            valueListenable: appValueNotifier.colorValueNotifier,
            builder: (context, color, _) => ValueListenableBuilder(
                valueListenable:
                    appValueNotifier.subtractValueNotifier,
                builder: (context, subtract, _) => Container(
                    width: 100,
                    height: 30,
                    color: color ? Colors.red : Colors.orangeAccent,
                    child: Center(
                      child:
                          Text("$increment $decrement = $subtract"),
                    )))))))

• Changing floatingActionButton

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      appValueNotifier.incrementNotifier();
      appValueNotifier.decrementNotifier();
      appValueNotifier.colorNotifier();
      appValueNotifier.operation();
    }),

• disposing all value notifier

We must dispose valueNotifier as ValueNotifier is a disposable value. Also, prevent app memory loss.

@override
void dispose() {
  appValueNotifier.subtractValueNotifier.dispose();
  appValueNotifier.incrementValueNotifier.dispose();
  appValueNotifier.decrementValueNotifier.dispose();
  appValueNotifier.colorValueNotifier.dispose();
  super.dispose();
}

---

Better real app example to use ValueListenableBuilder:

Building a Secured Flutter Application
Learn to Disable Screen Capturing & Video Recording And Enabling Fingerprint Authentication every timemedium.com

---

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.