Flutter Riverpod 2.0: Introduction

- By Nasir Zaidi

Flutter is an open-source mobile application development framework created by Google. It uses the Dart programming language and is known for its fast development cycles, expressive and flexible UI, and native performance.

What is Riverpod?

One of the most popular state management libraries for Flutter is Riverpod. Riverpod is an easy-to-use and powerful state management solution that was launched in 2020 by Remi Rousselet. It's built on top of the Provider package and it aims to simplify the process of managing state in Flutter apps.

In Riverpod 2.0, a lot of new features have been added, such as support for provider composition and scoping, making it easy to organize and manage your state.

It also introduced the concept of 'Watching' that allows to watch a provider without triggering rebuilds on all the widgets. This is particularly useful when you have a large number of widgets that depend on the same provider.

In this article, we will be discussing Riverpod 2.0, the latest version of the library. To start using Riverpod, you will need to add it to your project as a dependency in your pubspec.yaml file:

The main building blocks of Riverpod are ‘Providers’ and ‘Consumers’. A Provider is a way to store and manage a piece of state, while a Consumer is a way to access and use that state in your widgets.

Example: Simple Counter

Here's how you can create a simple counter using Riverpod 2.0:

In this example, we created a counterProvider that holds an integer value. The Consumer widget allows us to access the value stored in the provider and use it in the build method. We are also able to update the value of the provider by calling context.read(counterProvider).state++. Another advantage of Riverpod is support for 'Future' and 'Stream' in state provider.

In the above example, a ‘futureProvider’ is created which return the json data from a specified API, using this provider we can use data in our widgets as soon as it is ready.

Riverpod also provides powerful tools for managing and composing your state, such as ScopedProvider, ProviderScope and ProviderContainer, which makes it easy to organize and test your state management code.

Example: Login System

An additional example of using Riverpod 2.0 would be implementing a login system in your app. A login system typically requires you to keep track of the user's authentication state, such as whether they are logged in or logged out, and their user information, such as their name and email.

You could use providers to store this state and make it available throughout your app. For example, you could create a userProvider to store the user's information, and a authProvider to store their authentication state.

Here's how you can create a userProvider that holds the user's information:

The below code snippets walks you through creating an authProvider that holds the user's authentication state:

In your login page, you can use the ProviderScope to change the state of the userProvider and authProvider after a successful login.

You can then use these providers in other parts of your app to show different widgets or navigate to different pages based on the user's authentication state.

As you can see, Riverpod makes it easy to store and manage state, and share it across different parts of your app, which makes it an ideal choice for implementing a login system or any other feature that requires state management.

Advantages and Overview

Riverpod 2.0 is an improvement over the previous one, providing new features and optimizations such as support for provider composition and scoping, the introduction of the Watching concept that allow to watch a provider without triggering rebuilds on all the widgets and support for asynchronous providers.

It allows developers to store, manage and share state across the different parts of the app, which makes it an ideal choice for implementing a login system, handling asynchronous data and any other feature that requires state management.

Additionally, it provides support for Future and Stream, making it easy to handle async state. With Riverpod 2.0, you can easily organize and test your state management code, which makes it an ideal choice for any Flutter app.

Overall, Riverpod 2.0 simplifies the process of managing state by providing a simple and intuitive API, making it easy to organize, manage and test the state management code.

Flutter ecosystem has seen a huge growth in last years, according to a survey on the use of flutter by Stack Overflow in 2022, Flutter is the most popular cross-platform development framework, overtaking React Native.

Part of this growth is due to the ease state management libraries like Riverpod provide. Riverpod is easy to learn and very flexible in managing state and by using it, you can create more stable and maintainable apps.