What is ValueNotifier in Flutter: Simple Explanation and Example

ValueNotifier in Flutter is a special class that holds a single value and lets widgets listen for changes to that value. When the value changes, it automatically notifies listeners to update the UI, making state management simple and efficient.

How It Works

ValueNotifier works like a mailbox that holds one letter (value). When you change the letter inside, it tells everyone who is watching the mailbox that there is a new letter. In Flutter, widgets can watch this mailbox and rebuild themselves when the letter changes.

This makes it easy to update parts of your app without rebuilding everything. Instead of checking constantly, widgets just wait for the notifier to say "Hey, something changed!" and then refresh only what needs to be refreshed.

Example

This example shows a counter that updates its number on the screen using ValueNotifier and ValueListenableBuilder. When you press the button, the number increases and the UI updates automatically.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final ValueNotifier<int> counter = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ValueNotifier Example')),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: counter,
            builder: (context, value, child) {
              return Text('Count: $value', style: const TextStyle(fontSize: 30));
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => counter.value++,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Output

A screen with a large text showing 'Count: 0' initially. Each tap on the '+' button increases the count by 1 and updates the text to 'Count: 1', 'Count: 2', and so on.

When to Use

Use ValueNotifier when you have a simple piece of data that changes and you want your UI to update automatically. It is perfect for small state changes like counters, toggles, or form fields.

It is lightweight and easy to use compared to bigger state management solutions. For example, if you want to update a score in a game or show/hide a widget based on a boolean, ValueNotifier is a great choice.

Key Points

• ValueNotifier holds a single value and notifies listeners on change.
• Widgets listen using ValueListenableBuilder to rebuild UI efficiently.
• It is simple and good for small, local state management.
• Helps avoid rebuilding entire widget trees unnecessarily.
• Easy to integrate and requires minimal boilerplate.

Key Takeaways

ValueNotifier holds one value and notifies listeners when it changes.

Use ValueListenableBuilder to rebuild widgets automatically on value updates.

Ideal for simple, local state changes like counters or toggles.

Helps keep UI updates efficient by rebuilding only what is needed.

Easy to use and requires less code than complex state management solutions.