Gain insights into mastering Flutter state management with Riverpod and Provider libraries. Learn about reducing widget rebuilds and best practices to enhance your cross-platform app development skills.

data.tar.gz

Flutter_Web

Flutter_Web_Chp12

Flutter SDK is an excellent tool for developing cross-platform applications from a single codebase. So, it's no surprise that many professionals and learners have decided to gain mastery over Flutter concepts.

One such concept is state management, and many, despite having intermediate-to-advanced proficiency in Flutter, still struggle with this concept. This course will help you learn and master the best practices for state management in Flutter.

You will learn to use the two best Flutter libraries, Riverpod and Provider, for state management. You will even learn about reducing widget rebuilds by managing their state.

Master State Management in Flutter

# 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:



Learn about the ChangeNotifierProvider widget in Riverpod and how it works.

Introduction

Stateless vs. Stateful Widgets

Flutter Callbacks and Maps

Managing States and Widgets in Flutter

A Brief Look at the Flutter Provider Library

A Deeper Dive Into the Provider Library

Riverpod Library for State Management

Flutter Challenges

Conclusion

Appendix

The ChangeNotifierProvider Widget

Riverpod’s `ChangeNotifierProvider`

`Provider`'s `ChangeNotifierProvider`

The ChangeNotifierProvider Widget

Riverpod’s ChangeNotifierProvider

Provider's ChangeNotifierProvider

Riverpod’s `ChangeNotifierProvider`

`Provider`'s `ChangeNotifierProvider`