The ChangeNotifierProvider Widget

Riverpod’s ChangeNotifierProvider

In the previous lesson, we combine both the Riverpod and Provider packages. We’ve seen the most critical part of state management with Riverpod. We mixed Riverpod and the old Provider package to have some coding fun. We also checked how we could reduce widget rebuilds.

We have also discussed Provider's ChangeNotifierProvider in great detail previously. The new Riverpod state management package also uses the same ChangeNotifierProvider but with a particular flavor, making it more advanced.

Provider's ChangeNotifierProvider

Let us summarize and state the ChangeNotifierProvider's main points in the Provider package.

We have seen and used such cases in our early examples. A model class that extends ChangeNotifier can call notifyListeners() any time the state in that class is changed or updated.

In a model-view-controller pattern, we notify the UI to rebuild the layout as our data gets updated in the view folder. That is done through ChangeNotifierProvider.

ChangeNotifierProvider in the Provider package is a kind of provider that provides the updated state object to any place in the UI layout. If we’ve already used ChangeNotifier, it becomes much easier for us than before. Now we can do the same thing with the help of ChangeNotifierProvider and the Consumer widgets.

But in Riverpod, the role of ChangeNotifierProvider has changed completely. Riverpod’s ChangeNotifierProvider helps us reduce widget rebuilds and allows us to autoDispose.

What is autoDispose?

The main concept of autoDispose is to destroy the state of a Provider when it is no longer in use.

The ChangeNotifierProvider in Riverpod comes with the autoDispose feature. That is the most significant advantage of ChangeNotifierProvider in Riverpod. The use of autoDispose is also the main difference between the ChangeNotifierProvider here and that of the old Provider package. We’ll discuss this difference, but before that, we must briefly examine why autoDispose is essential.

There are multiple reasons for using this autoDispose method with ChangeNotifierProvider in Riverpod:

1. It helps to close the connection when using Firebase and therefore avoids unnecessary costs.
2. It resets the state when the user leaves a page and re-enters it.

As previously learned, in the Provider package, the role of ChangeNotifierProvider was to provide an instance of a ChangeNotifier to its descendants. Since it is a widget, it can have many descendants. We can directly send the updated data to the bottom-most widget without rebuilding the widget tree.

However, in Riverpod, the whole scenario takes a different route. Not only it helps us to autoDispose, but it also simplifies the entire experience. To demonstrate the advantage of ChangeNotifierProvider in Riverpod, we will make a simple app where we can add as many strings as we want by pressing the button.

If you have built an e-commerce application with Flutter in the past, we’ll apply the same logic to add items to the cart. To have a clear picture, let’s see the below image first: