Difference Between ChangeNotifier and ValueNotifier

Here we will learn the difference between ChangeNotifier and ValueNotifier. 

Generally speaking with ChangeNotifier, you need more code. With ValueNotifier much less code. 

But ValueNotifier only works with one value which causes one rebuild of the widget. Within change notifier you can have multiple values that would trigger UI build.

For ValueNotifier you will use ValueLisenableBuilder rather than Consumer widget which we use for ChangeNotifier.

See the complete code

Code for notifier controller

class MyProviderController extends ValueNotifier{

  MyProviderController(super.value);

  void incrementValue(){
    value++;
  }

}

Code for main.dart

import 'package:flutter/material.dart';
import 'package:provider_diff/my_provider_controller.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyProvider(),
    );
  }
}

class MyProvider extends StatelessWidget {
  const MyProvider({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    MyProviderController counter = MyProviderController(0);

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ValueListenableBuilder(
            builder: (_, myProvider, child){
              return Center(child: Text('Current value is '
                  '$myProvider')
              );
          }, valueListenable: counter,),
          TextButton(
              onPressed: ()=>counter
                  .incrementValue(),
              child: const Text("Tap me"))
        ],
      ),
    );
  }
}

When you want to work a on single value change  use valueNotifier. It makes your code faster to run, Since you only work on one widget to rebuild. It's bound to a widget, rather than whole widget tree.

Recent posts