State in Flutter and Riverpod

In this article we’ll try to understand what is state in flutter and how the Riverpod package manages state in flutter. If you’re an absolute beginner let me tell you one thing first.

Riverpod lifts the burden off the developers to manage state quite easily.

However, in this article, we’ll firstly take a look at what is state in flutter, then we’ll know what is new in Riverpod and how we can use it by migrating from the old to the new version.

State in Flutter

We can think of state as an information that can be read synchronously when the widget is built.

To enhance our app-performance, we should try to lessen the widget rebuilds.

However, state is not only related to widget rebuilds only, it might also change during the lifetime of a widget.

The widget implementer always notifies when the State changes using State.setState.

To sum up, the life cycle of a State objects work in tandem with a StatefulWidget and the StatefulWidget.createState method.

In a separate article we’ll discuss that topic in detail. At present let’s concentrate how we can use the latest Riverpod state management package.

How to use new Riverpod?

To use Riverpod state management package in Flutter, we need to assure ourselves a few things first.

Firstly, we need to use Riverpod latest package: ^0.14.0.

Secondly, we must upgrade our Flutter and Dart SDK.

Finally, we need to migrate to latest Riverpod from ^0.13.0. to ^0.14.0.

In this tutorial, we’re going to see how we can successfully migrate from old Riverpod version to the newest version.

As regards to this tutorial, you may get the full code in this GitHub repository. And besides, if you want to dig deep into the flutter state management, you may read the book State in Flutter.

By the way, if any flutter app was built using Riverpod ^0.13.0. it would not work anymore with new Flutter and Dart SDK.

Therefore the only solution left to us is Riverpod migration.

To migrate successfully from the old Riverpod to the newest version, we need to install the migration tool, that is Riverpod command line interface.

dart pub global activate riverpod_cli
However, we need to change the path of the executables.

export PATH="$PATH":"$HOME/.pub-cache/bin"
Now, as a result, we can use Riverpod Command line interface.

riverpod --help
And it gives us the following output.

Usage: riverpod [arguments]

Global options:
-h, --help Print this usage information.

Available commands:
migrate Analyse a project using Riverpod and migrate it to the latest version available

Run "riverpod help " for more information about a command.

All right, now we are ready to migrate and it looks like the following screenshot.

Riverpod Command line interface
Riverpod Command line interface


Next, we need to migrate from old Riverpod to the new, by issuing the following command.

riverpod migrate
Consequently, it might display the following message depending on your project and ask your permission to go ahead.

Widget build(BuildContext context, ScopedReader watch) {StateProviderModel state = watch(provider.state);

StateProviderModel state = watch(provider);
}

Accept change (y = yes, n = no [default], A = yes to all, q = quit)?
Let us accept the change and it looks like the following screenshot.

Riverpod migration in flutter
Riverpod migration in flutter


As we have successfully migrated from the old version of Riverpod to the newest version, now we can run the Riverpod flutter app without any worry.

Riverpod flutter app after migration
Riverpod flutter app after migration


Incidentally, we don’t have to change anything in our previous code. Certainly, we’ve only changed the theme primary swatch colour from blue to orange, so that we can differentiate between the old and the new.

Subsequently, we can click any button to change the provider value or you may say the state of the app.

Riverpod flutter app working after migration
Riverpod flutter app working after migration


Watch the change on the screen, and it works like a charm!

To use the latest Riverpod state management package we need to upgrade Flutter first. Therefore, for Riverpod latest version ^0.14.0, or flutter_riverpod: ^1.0.0-dev.11, our Flutter SDK should also be the latest; that is Flutter 2.5.3 • channel stable • and a Dart SDK >= 2.14.0.

If we want to use the latest Riverpod first upgrade Flutter and Dart SDK. Otherwise, we get the error: Object.hash not found.

If you have interest in reading more on new Riverpod articles and comprehend the changes that have taken place, please visit the following article lists.

How to use Riverpod StateNotifierProvider

What is better, Riverpod or provider

Method not found: ‘object.hash’

How to use Riverpod in Flutter

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter

Comments

3 responses to “State in Flutter and Riverpod”

  1. […] we’ve successfully managed state with the help of Scoped […]

  2. […] State in Flutter and Riverpod […]

  3. […] State in Flutter and Riverpod […]

Leave a Reply