Flutter Riverpod state management
Hello dev, this is one of the most complicated topic to talk in the Flutter world, because many people take it personal when it comes to state management solution. I want to say first that I don’t have any preference, and I think the best state management solutions is the one you fell comfortable to use, however I found this flutter_riverpod and I liked, so that’s why I decided to talk about.
If you don’t know what Riverpod is I’ll try to explain briefly… So basically it’s an evolution of the Provider which means that some points were improved on the Riverpod, for example now when reading objects you have compile-safe instead runtime exceptions, but if you want to know more about it go to the repository or the documentation, because in this article I want to focus on showing some simple examples using this tool.
Setting up
To start using the flutter_riverpod you need to add on your pubspec.yaml file the dependency like the image below.
Now you have to surround your first widget in the tree with the ProviderScope widget like the image below, and now you are able to find your provider in the widget tree.
Just a observation here, the first thing you need to do in order to find your provider, is creating sort of singleton instance of the provider class you want to create. In this first case you need to create a StateNotifierProvider with the class and the type os the state in this class and then return the instance of the class.
StateNotifier
To use the StateNotifier you need to extends from it class and give the type you want that class store, then you have to init a value on the super constructor according the type you gave before.
Now in this case you need to write the function to increment the counter, because the ideia is remove the logic from the UI, and this function will update the state object which represents the state of the object that you are managing.
To use the class you created, you need to surround the widget you want to listen the changes with the Consumer widget and put in the return of the build function.
The build function has three parameters which are: context, watch and child but in this case only the watch will be used to watch the changes in the CounterProvider class and update the counter in the Text widget.
In order to trigger the function increment in the CounterProvider class, in the onPressed function in the FloatingActionButton add the _incrementCounter function. And inside the _incrementCounter use the context to read the CounterProvider class and then access the incrementCounter function.
The result is like the image below, the Text widget will be updated with the increment every time you hit the FloatingActionButton.
FutureProvider
FutureProvider is used in the case you want to update the UI but you have to wait the code give you a return after some time, so you need to give a feedback to the user, for example a loading state.
To accomplish this, you need to make some minor changes on the previous code. First instead of having a int type, now you are going to have a AsyncValue with int type, and then you’ll need to start the state with a AsyncLoading or AsyncValue.data.
In the code below I started with a loading state and changed in the constructor just to give a different example. And then you need to write the async function in order to change between states until the execution finishes.
And to use in the widget tree you need to use the when and return a widget according the state you have.
The result is like the image below, the Text widget will be updated with the increment every time you hit the FloatingActionButton, but every time you push the button the CircularProgressIndicator widget will appear and after 3 seconds the counter will be updated.
StreamProvider
StreamProvider has the same behaviour of the FutureProvider, but here I’ll implement in a different way just to show other possibility.
Instead of using a StateNotifierProvider you need to change to a StreamProvider, and one good practice is use this autoDispose function in order to dispose the stream if you are not using it anymore. And instead of just return the CounterProvider class now you have to access the myStream property.
Now on the CounterProvider constructor initiate the StremController and execute the increment function. In the increment function now change Future.delayed to a Timer.periodic to execute the increment counter code every 3 seconds.
And now in your widget tree you don’t need to change anything, but I just removed the FloatingActionButton, because I don’t need it anymore.
The result is like the image below, the Text widget will be updated with the increment every 3 seconds.
That’s it, Riverpod is just one more state management tool in this ocean of state management tools in Flutter world, however it has a lot of benefits and improvements comparing to others, so if you are interested on it, check the Riverpod documentation to learn more about it.
