State Management Like A Pro - Flutter Riverpod

reaverpod can be considered as a rewrite of provider to make improvements that would be otherwise impossible it gives you access to things like compile safety looking at providers of the same type and it doesn't depend on flutter meaning you can listen to providers without the build context we're going to learn about provider state provider state notifier provider exchange notify provider stream provider future provider and also scoped provider stay cool i know it's a lot but we'll take it step by step if you're new here consider liking and subscribing and let's get into it moving to our pubspec yaml file we're going to add a dependency of flutter river pod depending on when you're watching this the version will be different so just make sure to add the latest one we are then going to wrap our root widget in a provider scope which is responsible for storing the state of our providers now we are used creating our basic provider which sole purpose is to provide a value as you can see we also have a parameter called rif which we can use to get access to other providers so the way we now read that provider in the widget tree is that we can simply create a consumer widget this one provides a builder where we can watch a specific provider of our choice in this case we're going to watch the number provider by using the watch command and then adding that provider now we can simply take that number and return it in a text widget by doing number two string and to show you that that works here is the actual application with that number in the middle something i dislike a lot is something i would call a builder hell where you just keep nesting and nesting builders but what flutter river pod does is actually give you access to something called a consumer widget this gives you access to the watch method inside the build method instead of having to create a consumer so if we go ahead and now try to remove the consumer by just replacing it with the text we can see that that works and as you can see in this specific example it made the code a lot more readable and now we're going to start digging a little deeper so instead of provider which just provides a value or object we're going to take a look at state provider which provides a value but you can actually change in the widget so starting off by creating a simple provider and then prefixing it with state state provider is very similar to the normal provider we can also use watch it and we're going to define the state as well now whenever that state changes that value is then going to be updated now to actually update this state we're going to define a new method called increment we're going to provide a build context as we're using a consumer widget here we can access the read extension on the context we're going to provide our state provider and we're simply going to increment it and of course to validate that it's actually working we're just going to create a floating action button and then give it the method increment to increment that actual state now we have those two out of the way now we're going to look at a bit more complex provider which is state notifier provider we will begin by creating a new class that class will extend the state notifier we are going to have the state being a list of integers for the initial state we will have a empty list and we are also going to define two methods one for add and one for delete as the state in a state notifier is immutable we are going to have to change this state in a immutable manner let me know down in the comments if you want to see a separate video on state notifiers now we can actually go back and create our state notifier provider the syntax is very similar we are going to use the state notifier provider the type we are going to use is going to be the numbers notifier the main difference is when we watch it we want to include the state because we actually want to use listen to this state now we can create our list view builder which is going to display our list of numbers and then on the floating action button we are able to call our methods of choice and here we can see that working example now our list is start to come together and then the most known one is probably change notifier provider we can begin by creating our numbers change notifier class this one is going to extend instead the change notifier here we can initialize our empty list of integers and we're just going to call that numbers we're also going to implement our add method which is going to add that number into the numbers list and then call notify listeners and then of course we have to define our unmodifiable list view which is just going to be the list view but we can't modify it when we actually get it from the ui let's now create a new provider and in this case it's going to be a change notifier provider the type is of course the new class we created which is the numbers change notifier and then we used instantiate that class moving down to the build method we're simply going to define a new variable for watching this change notifier now we can start using this change notifier as usual we're going to use it in the text view with the numbers and also the item count and then we can use it for adding a number of five now with change notifier provider also covered we will cover stream provider and future provider at the same time starting off we are going to create our future provider and this is the same syntaxx before we used prefixing with a future for this example we're just going to use a future.value but here you could do your request for your http server or whatever you use for stream provider it's going to be pretty much identical we're just going to prefix with stream instead and we're going to return a stream.value if you're using firebase here you could for example use the firebase off state changes now going back to the widgets we're going to start off by copying the home page so we can get it a bit more cleaner for these two examples we're pretty much going to remove all of that code leaving only the center and that variable now what we can do is replace that provider in the watch method with our stream provider copy that and make one for the future provider as well and then of course changing the names so it's a bit more obvious which is which now thanks to report returning a sync value instead of a stream we have this special when method which is going to have a data loading and error for the data we're just going to return a text with that data to string loading we can add a circular progress indicator for example and if we have any error we can display that we're just going to put a size box there for now and as you can see with the help of that syntax it's become very easy to work with those streams and futures and as both are async values the syntax are the same for both now with all of these providers done we only have one left which is the scoped provider this is similar to what you have seen on the provider package with the provider it's pretty much an inherited widget with the riverpod syntax so first off we define our scope provider so this is using the normal syntax of all the other providers except we're prefixing it with scoped and most of the times when you're using a scope provider you don't have a value to begin with so we will just throw unimplemented error now for this example we'll create two new widgets used to make this example more clearer let's say we have a home page and as well we have a details page so in this case it could be that we have an item in the home page and when we click on it we could send down the index to all of the different child widgets we will once again use a consumer widget so we don't have to use a builder inside the details page to override our scope provider we will start by wrapping our details page in a provider's scope this has a parameter of overrides where we can send an array of overrides and if we now type our scope provider we can see that we can override it with a value now we can set that value to 42. now using what we have learned on the other providers we can simply just listen to this provider value in the details page so now with this code provider we have done it so that it's only usable in the details page if we would use it anywhere else where we don't override its value it will throw a unimplemented error now two more things that i want to cover which are the auto dispose and also the family modifiers auto dispose will simply just dispose that future or stream when not in use now sometimes you want to pass values to your providers which is the usage of the family modifier you give it a type and then a name for that variable and then you can use that inside the provider looking at the usage of this you simply use it as a method and passing that value although we only scratch the surface when it comes to river pod you can learn more at official documentation of it i hope you all enjoyed this video a lot of time went into this so if you'd like to support me you can also check out my patreon or you support me by liking and subscribing and i will see you in the next one [Music] you

Channel: Robert Brunhage

Views: 69,134

Keywords: Flutter, Riverpod, Flutter State Management, Flutter statemanagement, State Management, State Management Flutter, Flutter Provider, Flutter Architecture, Flutter tutorial, Flutter for beginners, state in flutter, Flutter riverpod, Flutter riverpod tutorial, Flutter riverpod introduction, Flutter riverpod for beginners, Flutter riverpod state management, Hot to use Riverpod Flutter, Robert Brunhage, Flutter Riverpod guide, Flutter State Management guide, Riverpod tutorial

Id: GVspNESSess

Length: 10min 29sec (629 seconds)

Published: Sat Sep 12 2020

Reddit Comments

[u/in-the-angry-dome]

Interesting. So far I’ve been using MobX for observable state and GetIt for singleton dependency injection. This if I understand it right is combining those two into one.