Learn about Riverpod

Tram Ho

In Flutter there are many state managers: Provider, Bloc, GetX, Redux, … it’s hard to say which is better than the other. However, if you are familiar with Provider then do not hesitate to learn more about Riverpod. An upgrade of Provider. If you notice, the name “Riverpod” is the letters of the rearranged “Provider.

The provider is not perfect. It has the following problems

First, the Provider depends on Flutter because you are using Flutter widgets to provide objects in the widget tree.

Second, the Provider only relies on “type” to resolve the requested object. If you supply two objects of the same “type”, you can only get the object that is closer to the calling location.

Finally, if you try to access a “type” not provided, you will only get an error at runtime. This is not ideal as we should always try to catch as many errors as possible at compile-time.

Riverpod solves those problems:

  • Compile safe : No more ProviderNotFoundException or forgetting to handle loading states. Using Riverpod, if the code is already compiled, it should work.
  • Provider, without its limitations : Riverpod can support multiple providers of the same type; combining asynchronous providers; add providers from everywhere, …
  • Not dependent on Flutter : Create / share / tests providers, with no dependency on Flutter. This includes being able to listen to providers without aBuildContext. not depending on Flutter. This includes being able to listen providers without the need of a BuildContext.

Riverpod basics

First we need to add the riverpod package as it depends on your Flutter project. In this article we’ll use flutter_riverpod , which is how if you want to just use Flutter.

Riverpod’s Providers cannot be placed in the widget tree. Instead, they are global variables located in any file you want.

This simplest provider can provide a read-only value. There are many other types of Providers to work with Futures, Streams, ChangeNotifier, StateNotifier, …

The ref parameter is of type ProviderReference. You will see in the following section, it is mainly used to resolve dependencies between providers.

Although the Provider object is globally accessible, this does not mean that the provided object (in this case the string “Hello Riverpod!”) Is global. As with a global function, you can call it from anywhere, but the return value can also become a local scope. Consider the following code:

Where are the widgets !?

While the great news is that Riverpod Providers do not depend on Flutter, we still need to use the value provided by a Provider object from the widget tree – this is Flutter after all.

The Riverpod package only comes with a single InheritedWidget that needs to be placed above all the widgets on the page called ProviderScope. It is responsible for keeping something called ProviderContainer, which is responsible for storing the state of individual Provider objects.

Watching a provider

How do we get the string from greetingProvider so that it can be displayed in the Text? There are actually two ways to do it.

The first way is to change the handy superclass to the ConsumerWidget that comes from the flutter_riverpod package. This adds a ScopedReader function to the build method. Widget will be rebuild if any change occurs.

Another way to get value from a provider is to use Consumer , which is helpful if you want to quickly optimize your widget rebuilds, and don’t want other widgets to be rebuilds as well. In this case we only need to rebuild the affected Text widget version across the entire widget tree.

Reading a provider

Sometimes, it is not possible to call “watch” because you are not in the build method. Or, you just want to get a value from the provider, not the widget will rebuild. For example, you might want to perform an action when a button is pressed. That’s when you can call context.read (). Here is another type of provider – ChangeNotifierProvider:

We will take an example with the Counter App. The text widget will follow the “watch” provider and will automatically be rebuilt if a change occurs and the FloatingActionButton will only read the provider to call the increment () method on it.

The impossible with Provider ‘original’

Riverpod’s providers objects do not rely on types to find providers => that have multiple providers of the same type without problem.

Dependency between providers

Any real application has dependencies between classes. For example, you may have ChangeNotifier dependent on Repository, which in turn depends on HttpClient. Handling such dependencies with Riverpod is very simple and easy to read.

With the following simple example, there is only one FutureProvider that depends directly on a FakeHttpClient. Getting another provider inside the provider function is done by calling read on the ProviderReference parameter – ref is always passed in. If you depend on a provider with a mutable value, you can also call watch .

FutureProvider: Similar to Provider but it returns 1 Future.

Using the values ​​from FutureProvider from the UI is completely fun. Gone are the days of clumsy FutureBuilders! Riverpod makes it easy to build Future-based widgets.

Passing arguments to providers

Want to pass a user-defined URL to responseProvider? Use family, change responseProvider to something like this …

Automatically disposing of state

Caching for a provider’s state is great, but sometimes you may want to cancel a provider’s state when it is no longer in use for many reasons such as:

  • When using Firebase, you want to close connect to avoid additional fees
  • To reset the state when the user leaves the screen and re-enters.

…..

autoDispose will remove the provider’s state as soon as the provider is not in use. In the above example, this happens to change the argument passed to the provider family. However, autoDispose is useful even if you are not using a family modifier. In that case, the removal is initiated when ConsumerWidget a provider is disposed.

summary

This article introduced the basics of Riverpod. If you want to dive deeper, you can learn more here

Reference source:

Riverpod.dev

Riverpod Tutorial

Share the news now

Source : Viblo