Flutterexperts

Introduction :

Riverpod is also a state management solution in a flutter. It a basically a Provider, but of a different type. It has some advantages over a provider in that it is compile safe, does not have any limitation as a provider have and does not also depend on flutter. Riverpod support multiple providers of the same type, combining asynchronous provider, adding providers from anywhere.

Before starting our blog, let us know what topic will be going to cover-up

---

Table of contents:

Using Provider in Riverpod to build UI

Using StateProvider in Riverpod to change state of UI

Setup:

Before starting let us first start with the basics of installing up Riverpod

Add this dependency to pubsec.yaml file:

Let us understand the concept by building a basic “Hello World” UI…

Note: Before starting to code install a Flutter Riverpod Snippet to code fast and efficiently.

Lets code :

As you can see in the above code we have to first wrap our code with ProviderScope above to use the Riverpod with provider class in our code as we have done.

As you can see above we have created a normal provider named as numberProvider which contains the string ‘Hello World’.

As you can see above in MyHome class extends ConsumerWidget instead of the stateless widget to remove hectic coding which gave us the advantage not to use the Consumer widget instead. The final value variable is used to get a value of which is stored in numberProvider which is wrapped with a watch widget to get the value of the provider which can be later used in our UI.

The above UI looks like this:

Using StateProvider in Riverpod to change UI :

Let us node see how to use StateProvider to change the state of a UI

Lets code:

As you can see above we have used StateProvider which contains an integer return type. The numberStateProvider variable contains a value of state provider.

The numberState variable is used here to fetch a value of StateProvider here.

The above code UI looks like this and state change are performed are shown as :

---

For more info visit down the link:

Getting started | Riverpod
Before diving into the inner mechanisms of Riverpod, let’s start with the basics: Installing up Riverpod, then writing…riverpod.dev

Thanks for reading this article ❤

Clap 👏 If this article helps you.

Feel free to post any queries or corrections you think are required…✔

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.