Learn Riverpod 2.0 in 50 Minutes - The Ultimate Guide to Riverpod 2023

hey folks welcome to another tutorial it's Demi here and today we are doing a deep dive into Riverport and we're going to be looking at riverpod as a state management solution for your Florida apps and we are going to go and look into all the providers that Liverpool has and which scenario to use all this riverbot providers and we have a really simple sample up here and I've listed all the providers and I'm going to go and explain every bit of it with sample examples but we really have a simple UI setup here and for this app I'm using a package called Flex color scheme by right mic and it sort of gives you beautiful color scheme out of the box that you can use so you can check it out as well and what we have here is a simple setup where I have the home page and on the home page I have a little button here which I created this is called free button and it just links to different pages of Provider page State provider page feature provider page and all the stuff so we are going to go deep dive into each and every of this and see when you should use it in your Florida apps and the scenarios while you should use either State Notifier change notifiers team provider and the likes so um let's get started before we continue it's important to let you know that riverpod is not just a state management framework in fact it's a reactive caching and data binding framework what it means is that you want to catch your data and you want to bind data with your UI setup and so um you have an object that you have and you can provide that anywhere in your app so um it's just beyond Estate Management framework so with that we can start and the first thing we need to do with the riverpod package to use in the app is to um go to the docs and then there is a flutter River board package here so we are going to go to that and then we need to install flutter riverboard 2.0.2 that is at um version when I was recording this video so we are going to add that in our perspective Yamaha file and that will install riverbot for us and the next thing is go down a bit we need to wrap our main foul amend the dot in a provider scope so if you go down you may be able to see it so here is it so you need to wrap your my up after just the run up in provider scope so let's go ahead and do that and here so we are going to wrap it in a new widget and then we are going to give it um providers yeah and then we are good to go so we are going to just look at every bit of um Concept in riverboard so let's say you want to have a value accessible throughout your app and you're thinking I can do that with riverpod you want to use a provider so let's go to the provider page.dart here and then what we want to do at the top of our file here is to create a provider we want to provide a value and we can save value provider equals to provider yeah and then you can annotate what you want to provide here so let's say we want to provide an integer and we we now import the riverboard here now you can see we have created a simple provider here and anytime we call a value provider it will always return 42 for us so um if you look at ref rev is simply a provider reference and we are going to look at it in a um in more details in this video because rev gives you some capability that you would need in future so but for now if you want to really provide a value throughout your app you just need to create a provider and give it a type and then you give it the value it's going to return now this is not going to stop here because you need to let your widget know about this provider so how do you let your widget know about that provider to make this provider available in your widget we say we want to read the value provider and look at it now the value provider is simply a read only value you can't modify this so um so let's provide this provider let's read that in our provider page so let's go ahead and say we have a body so there are two ways you can actually use the consumer widget consumer widget here and it has a builder so let's let the autocomplete gives us so it's requiring a builder and then a builder has a widget Rift this is ref this ref allows us to read a provider so you can simply return let's say we are returning a value here and look at what it has given us here and we have a widget rate which allows us to read a provider so now with this ref we can simply say ref.watch and we are watching a value provider here and when I save that and I click on provider here we should be able to see so there's a problem here busted no provider scope found and we simply just need to restart our app to be able to see a providers when we click on it you see the value is 42. if I change the provider here and then I refresh click on provider again it's 50. it's basically just provide you a read-only value I trout you up so you can do that and we are here in other pages in our pages and it's going to give you the same results another way you can watch a provider in a widget is to extend a consumer widget instead and when you extend the consumer widgets you have to provide another param here which is widget ref widget ref allows your widget to interact with providers so you have access to a whole lot of methods like read watch invalidate on the likes okay so how do you now use it so I'm going to comment the this consumer widget out and I'm going to just pick this and just comment this out and put this instead and now you see we have the value to be 50. let's wrap this in the center and we are good to go it's the same thing so you see we have access to our value provider now remember that this provider is read-only so if you want to change the state of this value here which provider are you going to use so that brings us to a state provider which you can modify the states of your provider to do that we just need to Let's copy this and then we go to state provider screen and let's find that here okay and we will do almost him but this time I'm going to rename the provider to Value State provider and here instead I'm going to give it a state provider and then you import that from the report what this does is that you can modify the states of this provider so how do you do that um let's convert this to a consumer widget and then provide give it with your trip here so we have so let's say we want to watch the provider we watch the provider here like this remember that watching means you want to get the value from the provider so we are going to be doing the same and here exactly so we have value is 50 from here so let's say we have um let's modify this a bit let's say we have a column here and then we have a button let's have a size box and then we have a button okay so let's now let's say we want to change the value on this Notifier we want to each time we press the button it increases and we just have to do ref dot read so what does read gives us um read a provider without listening to it so if you want to see the value use the watch if you want to read and you should use read in like your own pressed when you do an action when you do an event to avoid side effects you shouldn't do that outside your return here you shouldn't do that you should do that in when you do an event when you click a button and the like so let's provide the provider here and then we give it here so when you want to change the stage you need to call a method called Notifier here so when you do the Notifier let's go inside it a bit um we don't have a dock but what it does is it basically notifies this provider that oh we want to change your stage we are notifying you that we want to do stuff and then we can change the stage here so what we want to do is that we want to increment the value of our state Provider by one each time we click on the button so let's hit and it's good we are good to go now let's say we have incremented um this value here and then we want to reset to like 50. how do we do that so we can easily do that let's have another button by using a method called invalid itself the text is going to read invalidate here like this and then instead of doing Raptor read we are going to remove this dot rectifier set of generate dot read there's a method called invalidate and what this does is the refreshes the state of your provider basically so let's do that and invalidate so let's say you don't want to click on a button like we have done here that resets it back to 50. you want to do that when you pop up the screen you can easily add a meth uh an auto dispose here so these automatically disposes your provider when you leave the page so let's save this I'm going to give you an error so let's just restart and go back to State provider so let's increment and then when we up the screen and come back to it it's reset to 50. which makes sense so let's remove this Auto dispose and we try it again if it actually does that let's um increase go back say it's just 64. so Auto dispose helps you to dispose automatically dispose the provider when it's not used by the screen anymore so let's say you want to perform some action based on provider State changes there's something called ref that listen that you can use and this allows you to listen to your provider um right out of the box and so let's work with this and let's annotate it by giving it an INT because our state provider is of type ins so it gives us two arguments here previous and current and then we can print something like this okay so um this is really good if you want to show um if you want to show snack bars you want to show dialogues and the likes but then we need to pass in our provider here which is a value State provider so we can do some checks and we can see if our current let's say when our counter gets to 55 doesn't show a snack bar okay so we are showing a snap bar here so let's test this let's invalidate and then we increment till we get to 65 you see value is 65 which is good so you use your rev.listen when you want to respond to State changes and you want to show your custom navigation you want to do some navigation you want to do some snap bars you want to show some dialog box it's good and it won't be called when your build method is cut so it's going to ignore it it's only going to be called when and your state changes has happened so um it's not going to cause some side effects for you next on our list is the feature provider so we are going to go to the Future provider page here and yeah um so we you use a feature provider if you have some feature that you want to listen to so the feature provider comes out of the box that helps you undo feature provider it looks like the future Builder widget but um you will see how to use this so I'm going to create a new folder called Services here and I'm going to say API service dot Dart because we want to create a simple API and we are going to say API service like this and then I have created um a model here suggestion and what we are trying to do is to use an API cardboard activity so anytime you call this um endpoints is going to return an activity for you that you can do when you are bored and we are going to use a package called Doom Geo is used for HTTP calls so we go to our prospect.jammer valve and then we installed you so I'm going to copy it here and install due here and we get that installed now we are going to create a method that sort of returns suggestion that's the model and we say get suggestion foreign is going to be async okay so let's see how to use deal and if you do a try catch you just call a video.get so let's do it try catch and then we do final response equals to a weight View that gets okay so our end points is this so we are going to just put it here like this so we can say so it's going to return and let's just print e here so what we've done here is that it's going to return um it's going to return suggestion Dot from Json which we have in a suggestion model what it does is just um let us decode this so we're passing just in the code and passing the rest that data here now um this is given okay so let's just show an exception like this and so we have um an API service now remember that I told you if you want to provide um if you want to sort of provide um some data you can use a provider so let's create a provider and say API service provider and then is going to provide us with API service here you can see because we are going to be needing that when we create a future provider okay so let's go back to our future provider page now we want next thing is to create a provider here and say um what should we call it we can call it a suggestion future provider something like this and is going to look like this okay so we are going to import the feature Provider from riverbot we are also going to import the suggestion model and then look at what we are doing here we say final API service equals to ref.watch we are going to watch our API service provider that we have provided in API service here and then once you watch it we're just going to return get suggestion because get suggestion is a feature so now that we have this we can then convert this to a consumer we get and then passing widget ref that let us access suggestion for subject provider and now let's have a body and then let's have a center and then we have a chart okay so at the top here what I want to do is to um do suggestion Rev equals to ref dot watch so I want to watch suggestion future provider because I want to be able to watch the value of our future now if I want to use this I have to do suggestion ref Dot now there are some um data here that I need and how do I do that I use this when method so when allows you Out of the Box gives you an async value for example um when you do ref.watch what you get is an issue value of type suggestion so what it means is that you have access to data error loading so you can undo the states this state when a future provider is loading also when there is an error so this is where the data is going to go and I can do like this also for the error error is going to have a um of type error and stack Trace so you can have error I don't need to stack trees for now so you can just find underscore and for the loading you don't need anything for the loading so I'm just going to return a circular progress indicator here now for the if there's an error I want to return the error itself and then when there is a data I'm going to return a text which is of activity you see it's already working so let's and try it again error getting suggestion now you remember where that error is so that means that there's an arrow from a future provider so you can see that it's going to return the text from here so let's fix this and let's put a breakpoint here and then when I click on it I should be able to see the arrow so it's saying that internal link Dash map is not a subtype of string so how do we do to fix that let's remove this Json decode for now because I think we are getting a map and let's try again and yeah we have our answer here so we and this is how to use your future provider just use your dot when and you have access to data you have access to error and the loading there are some other data in your async value as well so you can go deeper and find them out you've noticed that each time we click on a feature provider here it returns a new codes for us a new thing to do a new activity for us let's see but we have to go out and come in each time but what if you want to pull to refresh and it's going to give us a new activity to do so let's do that um let's say we wrap our center with the new widgets called refresh indicator but then we have to give it an unrefresh yeah so how do we refresh a future provider there is a method called refresh here that refreshes the state of your provider we then pass in our suggestion feature provider here and then if you have an error but then we have you have to add that feature there to refresh now one more thing before we continue let's remove this Center and then we wrap this in a list View um to do that let's first wrap it in a column and then we replace column with recent view like this because refresh indicators only work with square label items so if I refresh and you see it gives us a new activity to do each time we refresh let's start looking at stream provider which is the next one okay so I have created a service called stream service here and it's going to return a strain and it's going to return like an integer every second and so the same way you use a future procreative future provider is the same way you do a stream provider they're similar just that this handle stream while feature provider handles features so we are going to have stream service provider foreign is going to return stream service same way we did for the API service and that would mean we go to our stream provider page here and then we create a provider that um reads our stream service so we have stream provider yeah let's do we already have stream service provider so stream provider um let's say stream value provider let's name them properly and then it's going to return a stream provider like this and in here we we have ref foreign service and then we will return the stream service dot gets track we need to import all this first and then we have that guess stream so we have a stream now okay so how do we use that in our widget we just do convert this to Consumer widgets and then we do with your draft ref and then we have a body which will return a center same way we did and then we have a child so at the top here I will have a value stream okay stream value and we have stream value provider so we do stream value dots um same way we have for a future provider so what this does is that it helps us it returns an async value too and allow us to undo when it has a data when there's an error and also when the it's loaded so out of the box we have others and we can easily for the loading I'm going to return a circular loading progress indicator for the arrow I'm going to return a text and then here I'm just going to return a text with the data and as you can see we have data here and let's run it again we don't have an auto dispose on this so let's add an auto dispose so that when we pop out the screen and we come back it should dispose the provider so we are loading 0 1 2 3 4 and so on let me add some style here so you can see it properly textile font size is let's give it an 18. or 30. so you can see it properly okay good and let's cover up the screen come back zero one two and it goes up like that so the scenario in which you use a stream provider is when you're reading sockets or you are interacting with Firebase and it's really good in those scenarios so you want to watch some data from Firebase stream provider is good for those scenarios the next one is the change Notifier provider and let's look at the dock a little bit so here is the dock for running a pod and you can see the URL here but um changing the fire provider is a provider that listens to unexposes the change Notifier from flutter so but change Notifier provider is discouraged by liverboard and the only reason is that you want to have a state that is immutable that can be changed so it is highly discouraged and live apart but anyways you should prefer using the state Notifier provider instead but we are going to look at it and because it's important you know it and of course because you are probably going to use it in some navigation packages like go router if you want to do your and Route logic so let's see how to implement change neutral provider in real report and so we have a an example here and when I click on it it's really simple I have a list of products here and then as I add this product to a card I want this card to increase and then when I click on this card I see all the click cards and I can clear so we want to implement this using change Notifier provider and then we will Implement these two in a state Notifier provider later so let's go ahead I'm going to go to the page where we have state Notifier provider and we have the UI like this it just has a body with a list Builder and a list of products and then the action is here that when I click on this one it shows all the list here and of course I'm I have um a model here which is the product and then I have a static um variable here that Returns the list of products that you're saying here so let's go ahead and implement and so here I'm going to create a folder called Data and in here I'm going to say cards provider dot dot and here what I want to do is I'm going to create a class and I'm going to call it cards provider and it's going to extend a change Notifier change Notifier is from the Florida framework itself Okay so now you need to declare a list of products here and it's going to be our products and I'm going to make it an empty string empty list sorry and let's us import product here we are going to set um a getter for it we don't need to make it final because we will modify it later okay so let's now start adding our logic so let's say we want to add a product so when you click on this one you should add your product to this list of products and instead of products let's call it cards this is like our cards and you have cards here so I can add three cards by adding to a card I will add the product what if I want to clear if you want to remove a product you can call cats.remove it will remove the product there and I want to clear the cards and then it will clear all the list here okay and which is good for us um so and to use this we need to create a provider which is cards Notifier provider and instead of having State Notifier it's going to have a change Notifier and it's going to return like a list of products here and then instead of calling this one cat's provider let's call it card Notifier makes sense because it's a Notifier and then we will import the Cardinals via provider here and what we need to do is it should only take in a cut Notifier we don't need to say it returns a list of notifiers okay so um yeah so we are good to go and remember that you are going to call change Notifier provider make it a type of your class that is extending change Notifier and then it's going to return the change notify itself and then we can go ahead and use that so let's go to our UI here and which is our change Notifier page and then let's change this to a consumer widget because we need access to all our provider that provider itself so we have this widget ref ref which is good now we want to do an unpressed add the product to the cut so we will have ref dot read what is the name of our provider cut Notifier provider and then we import that here remember that you have to add the Notifier and then you can do dots what ad products which is going to add the products to our list like this and so let's go up here in the in the cuts here let's make sure that as we add the item it is showing up here so we are going to be watching the provider so let's see cut Notifier we are going to be just watching cut Notifier provider so here we are going to say cut Notifier Dot cards foreign [Music] ER one more thing I want to rename this to card Notifier which makes sense because that's the right name and then let's sort of test out this as we are adding oh we are missing something as well I didn't save this we are missing something let's go back to our change Notifier page we didn't show the total or did we we didn't so um in the total here it will be our cut Notifier Dot cards remove the const and it's going to be the string okay it's going to be that lens and then it's the string which makes a lot of sense so we have zero as we add you can see it's already there okay so you see you have a central place to add all your cuts and if you click on the cards you see we have red shared tradition and the the total which we have done okay we can also Implement for clear here and how to do that we go to clear and it's basically going to be ref dot read cards Notifier provider dot Notifier dot clear let's see the method itself clear Cuts that's the method and if you do clear let's try again it sort of clears it here but it doesn't clear here cleared here because um we are not making the alert dialogue stateful so for the state Notifier provider so let's go there we need to implement this the same way we did for the change Notifier but instead we are going to use State identify so let's go to the state of the fire page this is where we Implement and but let's write the logic for casted Notifier which is a file that I've created under data okay so what we are going to do is to do write a class card State Notifier is going to extend a state Notifier and then this would be of type we are going to do and because we are handling a list of products basically so let's import them like this so um cut notify and wants you to supply it's given an error because it wants you to invoke a Constructor and this is how we are going to do it we are going to be using the super keyword here but we are going to set the list of products here as empty so that means the state is going to have an empty list of products now we have a method called add production so if you want to add a product once you're passing a product here instead of modifying the state directly we because you can't modify the state but so what we are going to do is we are going to look through the state using the cascading operator here and then we're going to add a product to it so we are going to create a new list and set us to it if you want to remove a product is the you are going to look for the state where this is equal to this but we don't have the logic for remove product so we are going to remove that and then we have the cut here where we will clear the cut just setting it as empty okay so let's go Implement that in our UI but first we need to create the Notifier like this Cut State Notifier provider State Notifier provider the cost State Notifier and then the type which is a list of products and we are going to just return this cast State Notifier here as you can see so it takes two arguments the casted Notifier and your list of products which is good so let's go ahead and go to the state Notifier page screen you know how we do we are going to turn this to a consumer widget and then make this have an argument of ref and then we can do cards State Notifier like this so this one is a list of products now we can say go here and say cards dot length and then we can do the string which is zero here because the length of our Cuts is zero now let's have ref that's read cards Notifier State Notifier provider dot Notifier and we will have access to add products and we are adding the products here and we are good so let's try that and see if our Cuts will increase and there you go it does and we can also implement the clear cuts which we do rev dot read casting Notifier provider dot Notifier and clear cut and for the list of products it will be cut dot mob cut that food here which calculates the cost of all the items in your cart and then when we open the cards you can see that's calculated all the items in a cut and we hit clear this also clicks so we have talked about all the notifiers and providers in Riverport and the next thing last thing we are going to talk about is modifiers in Riverport we have talked about one which is the auto disposed modifier that we added to our feature provider you can also add them on all your providers for example we can make this and auto dispose provider which means that in your state Notifier provider let's reload or anytime you modify the state and you pop out of the screen it automatically disposes so let's pop you see this returns to zero for your state Notifier provider if you add all your cards and you come back you see it still has it which doesn't make sense so what you can do to fix that is to also add your auto dispose modifier here and you reload and anytime you pop out of the screen it will dispose the state the second type of modifier is the family modifier and let's say we are on a feature provider page here and then in our API service you want to pass in like an ID to this API and then you do some string ID for example now how do you pass it if you are using a feature provider okay how to do that is by using the family modifier with a family modifier you can sell which type of um parameter that you want to pass so this is the string and then you will say I want to pass in an ID or whatever you the variable you call it and then you just pass it here as you can see very easy and when you come here in your watch you have to specify what it is that you are passing you can say I want to pass in one and this is going to pass this value to your suggestion future provider and pass it down here and then you can append that to your API URL and the same thing here you can just pass in one and it's going to do the refresh so that's the other type of modifier that you have in riverbot and it comes really handy when you want to do stuff like this so we have talked about all the types of notifiers and provide us in Riverport and if you want more you can go to the docs which is still in progress but you can see the version two docsia basically everything is there so we're talking about modifiers we talked about that you read the provider we're talking about all this provider so that is basically what riverpod is and driven pod is more powerful than this actually you can use it for your dependence and injection your service location and a whole lot of stuff so you can go over to the documentation here and you can see a whole lot of scenarios where you can use it so um in the next video I'm going to talk about code generation retrievable so instead of having to write all these providers you can just annotate your service and it's going to do the magic behind the screen so watch out for that video and this is where I'm going to stop this video in the next one I'm going to cut you make sure to like subscribe and put on the Bell notification icon if you love this video see you in the next one bye [Music]

Channel: Temi Codes

Views: 24,175

Keywords: riverpod, flutter tutorial for beginners, state management, flutter riverpod, flutter riverpod tutorial, riverpod state management, flutter state management, Flutter statemanagement, State Management Flutter, Flutter riverpod state management, Flutter Riverpod guide, Hot to use Riverpod Flutter, How to use Riverpod Flutter, Riverpod tutorial, Flutter State management guide, flutter state management provider, riverpod flutter tutorial, flutter riverpod example, riverpod2022

Id: grcgR9tUGiU

Length: 50min 44sec (3044 seconds)

Published: Sun Oct 16 2022