Difference Between ChangeNotifierProvider & ChangeNotifierProvider.value.

• General

A Class that extends ChangeNotifier can call notifyListeners() any time data in that class. So, in this article, we will see the Difference in ChangeNotifierProvider & ChangeNotifierProvider.value.

Difference in ChangeNotifierProvider & ChangeNotifierProvider.value.

State management is a crucial aspect of building robust and maintainable Flutter applications. With the Provider package, developers have access to powerful tools for managing state efficiently. Among them, ChangeNotifierProvider and ChangeNotifierProvider.value play pivotal roles, offering distinct approaches to handle the lifecycle and creation of ChangeNotifier objects.

Understanding ChangeNotifierProvider:

ChangeNotifierProvider is designed to facilitate the creation and management of ChangeNotifier instances within the Flutter widget tree. Here’s how it operates:

• Creates a new instance: When using ChangeNotifierProvider, a new instance of the ChangeNotifier class is created each time the provider is built. This is accomplished by providing a create function that generates a fresh instance of the ChangeNotifier.
• Manages lifetime: The provider automatically handles the disposal of the created ChangeNotifier when it’s no longer required. This ensures efficient resource management and helps prevent memory leaks.
• Use case: ChangeNotifierProvider is ideal for scenarios where a fresh instance of the data object is needed every time, such as managing application-wide state or data specific to a particular screen.

Example Code Snippet:

dart

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


// Define a ChangeNotifier class
class Counter extends ChangeNotifier {
  int _count = 0;


  int get count => _count;


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


// Define a widget that consumes the ChangeNotifier
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});


  @override
  Widget build(BuildContext context) {
    final counter = Provider.of(context);


    return Text(
      'Count: ${counter.count}',
      style: const TextStyle(fontSize: 24),
    );
  }
}


// Define a widget that triggers a change in the ChangeNotifier
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});


  @override
  Widget build(BuildContext context) {
    final counter = Provider.of(context, listen: false);


    return ElevatedButton(
      onPressed: () => counter.increment(),
      child: const Text('Increment'),
    );
  }
}


void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('ChangeNotifierProvider Example'),
          ),
          body: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CounterDisplay(),
              CounterButton(),
            ],
          ),
        ),
      ),
    ),
  );
}

Understanding ChangeNotifierProvider.value:

On the other hand, ChangeNotifierProvider.value offers a different approach to state management:

• Uses an existing instance: Instead of creating a new instance, ChangeNotifierProvider.value accepts a pre-existing ChangeNotifier object. It simply references this object without generating a new one.
• Doesn’t manage lifetime: Unlike ChangeNotifierProvider, developers are responsible for managing the lifecycle of the provided ChangeNotifier object separately. This includes disposing of the object when it’s no longer needed to prevent potential memory leaks.
• Use case: ChangeNotifierProvider.value is suitable for scenarios where a ChangeNotifier instance has already been created elsewhere, such as in the initState method of a StatefulWidget. It enables the sharing of an existing object with other widgets without unnecessary recreations.

Example Code Snippet:

dart

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


// Define a ChangeNotifier class
class Counter extends ChangeNotifier {
  int _count = 0;


  int get count => _count;


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


// Define a widget that consumes the ChangeNotifier
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});


  @override
  Widget build(BuildContext context) {
    final counter = Provider.of(context);


    return Text(
      'Count: ${counter.count}',
      style: const TextStyle(fontSize: 24),
    );
  }
}


// Define a widget that triggers a change in the ChangeNotifier
class CounterButton extends StatelessWidget {
  const CounterButton({super.key});


  @override
  Widget build(BuildContext context) {
    final counter = Provider.of(context, listen: false);


    return ElevatedButton(
      onPressed: () => counter.increment(),
      child: const Text('Increment'),
    );
  }
}


void main() {
  final counter = Counter(); // Creating a ChangeNotifier instance


  runApp(
    ChangeNotifierProvider.value(
      value: counter,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('ChangeNotifierProvider.value Example'),
          ),
          body: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CounterDisplay(),
              CounterButton(),
            ],
          ),
        ),
      ),
    ),
  );
}

Choosing the Right Approach:

Deciding between ChangeNotifierProvider and ChangeNotifierProvider.value depends on the specific requirements of your application:

• For scenarios where fresh instances of the data object are needed and efficient lifecycle management is crucial, ChangeNotifierProvider is recommended.
• When you already have a pre-existing ChangeNotifier object and want to share it across multiple widgets without recreating it, ChangeNotifierProvider.value offers a convenient solution.

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen the Difference in ChangeNotifierProvider & ChangeNotifierProvider.value. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.