Builder widget for ChangeNotifier in Flutter

Question

Background

• A ValueNotifier has a ValueListenableBuilder widget.
• A Stream has a StreamBuilder widget.
• A Future has a FutureBuilder widget.

Question

• What is the builder for ChangeNotifier?

What I tried

I tried using a ValueListenableBuilder with ChangeNotifier but ChangeNotifier doesn't implement ValueListenable.

I know I could use ChangeNotifierProvider from the Provider package, but I'd like to know if there is a solution that doesn't require a third-party package.

Answer 1

Use ListenableBuilder.

This is a supplemental answer demonstrating using a ListenableBuilder to rebuild the UI on a change from a ChangeNotifier.

It's just the standard counter app.

counter_model.dart

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get count => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _counterModel = CounterModel();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            ListenableBuilder(
              listenable: _counterModel,
              builder: (context, child) {
                return Text(
                  '${_counterModel.count}',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterModel.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Update: Previously this answer demonstrated the use of AnimatedBuilder.

Note: In this particular case (as in most cases), a ValueNotifier and ValueListenableBuilder would be sufficient. See Flutter state management for minimalists.

Answer 2

ChangeNotifier is a direct implementation of the Listenable Widget and for the Listenable, you can use AnimatedBuilder, which triggers rebuilds from a Listenable without passing back a specific value Also, your class could extend from ChangeNotifier and add new capability to it and you can create a custom Builder widget base on these new functionalities

Answer 3

You can wirte a simple widget by yourself. use setState as a listener for a ChangeNotifier.

class ChangeNotifierBuilder<T extends ChangeNotifier> extends StatefulWidget {
  const ChangeNotifierBuilder({
    Key? key,
    required this.value,
    required this.builder,
  }) : super(key: key);

  final T value;

  final Widget Function(BuildContext context, T value) builder;

  @override
  _ChangeNotifierBuilderState<T> createState() =>
      _ChangeNotifierBuilderState<T>();
}

class _ChangeNotifierBuilderState<T extends ChangeNotifier>
    extends State<ChangeNotifierBuilder<T>> {
  @override
  void initState() {
    widget.value.addListener(_listener);
    super.initState();
  }

  @override
  void didUpdateWidget(covariant ChangeNotifierBuilder<T> oldWidget) {
    if (widget.value != oldWidget.value) {
      _miggrate(widget.value, oldWidget.value, _listener);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    widget.value.removeListener(_listener);
    super.dispose();
  }

  void _miggrate(Listenable a, Listenable b, void Function() listener) {
    a.removeListener(listener);
    b.addListener(listener);
  }

  void _listener() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return widget.builder(context, widget.value);
  }
}

Answer 4

As of today, AnimatedBuilder is renamed and update as ListenableBuilder

Hope documents will be updated soon but you can see related issue and examples here https://github.com/flutter/flutter/pull/116543/files

Answer 5

You can use consumer for Change and the build of your UI! Try out these - https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Answer 6

The builder for ChangeNotifierProvider, ChangeNotifierProvider.value and other providers is a Consumer:

ChangeNotifierProvider(
  create: (context) => CounterModel(),
  child: Consumer<CounterModel>(
    builder: (context, model, child) {
      return Text('${model.count}');
    }
  ),
),