Riverpod 2.0 – Complete Guide (Flutter Tutorial)

if you've been at least a bit active when it comes to flutter packages in the last year or so you have surely heard about riverpot a reactive caching and data binding or some would say state management package that is sort of an upgrade of the beloved provider i actually covered it with a tutorial quite some time ago when its api was still unstable but riverpod has come a long way since then it's much more mature helpful and versatile and all of these changes naturally mean that it's time for a new tutorial to prepare you to fully utilize the power of river path 2.0 and most likely also its upcoming versions [Music] hello welcome to riso coder where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you build so subscribe and hit the bell to join us on requests for becoming in demand flutter developers so what actually is rear pot well its purpose has a lot in common with classes and packages which you probably already know but you probably also know barrier pot nevertheless those packages and classes are inherited widget provider get it and partly also get x because a part of it is also focused on state management and on providing things around the app in one way or another but what sets every robot apart from all of these options that are just jumping at you from all the different sides well it's the fact that a river pod combines ease of use clean coding practices and complete independence from flutter which is by the way great for testing also compile time safety is in here as opposed to dealing with runtime errors and at the same time report also offers performance optimizations all of this you have in just one package and naturally this makes it a great option for your state management slash providing things around the app needs and also robot has quite a unique approach to how you do all of this which is unlike all of the other options out there now let me also preface this by saying that if you are a total beginner in the flutter state management scene then this tutorial may not be for you like i mean if you don't even know what a stateful widget is then please go ahead and check out this official documentation these flutter docs will get you up to speed with everything you need to know and once you know the basics you can come back here and learn about river bundle right and by the way all of this which i'm scrolling through here the link to this is in the article to which you can get from the link in the video description and besides a link like this links to documentation link to the riverport package and all other kinds of links from that article which is linked in the description you can also find all of the code written in this video and go through this lesson at your own pace now the version of the package we are using in this tutorial is flutter riverbot 2.0.0 dev five all of the content of this tutorial is going to be fully valid for once the actual stable and non-dev version comes out so that's totally fine if you are working with the stable 2.0.0 or 2.0 point something version that's totally fine and i think actually that at least the majority of what we are talking about in this tutorial is going to work even if there is at some point in the future flood river pod version 3.0 just saying and before we get to actually our vs code and creating some actual app let us just first go through some of the basics in this presentation form if you want to provide or make accessible a string throughout your app using riverpod this is how you would do this now this is really different than with any other like provider type solution you may have out there right i actually have an older article which compares riverpod with the regular provider package and that is also linked in the article to which you can get from the link in the video description but just briefly if you look at this and you're familiar with the provider package you know that well the provider package declares its providers in the widget tree but here we declare providers somewhere so where is it is actually top level so this is outside any kind of a class outside any kind of a method this is just top level final variable this is also different from any kind of a service locator type of thing you may have going on like get it we are not registering anything anywhere we just simply do this and what are we actually doing here well if we break this line of code down we are just declaring a provider giving the name my string provider and this provider is the simplest type of a provider because there are multiple types like future providers stream provider i don't know change notifier provider what have you but this is the simplest type of a provider which simply will make sure that we provide this hello world string and this ref parameter we are going to get to it in more detail but this is just used to interact with other providers again towards the end of this tutorial we're going to get to this ref parameter which is of type provider ref so this line consists of declaring a provider with the name my string provider and then actually saying that my string provider will provide the string hello world and by the way just so you know from now on we're going to call the object being provided by the provider state so state in this line would mean hello world string if we think about it this provider declaration is very similar to how you would declare a regular class and also what's similar is the global nature of the declaration of the provider but the provider itself not being global now what possibly can i mean by this let's check it out so here we have a example with a class which is much more easy to think about just like for a provider a class also has a declaration and a name in this case of course the name of this class is my class and then also we can use not the class really but we can use an object of the class an instance of the class while the class declaration is of course accessible globally the instances of the class are not global this object is not global right this is not a static class after all you have to instantiate it and once you instantiate it this is just like one object one separate thing it's not global you can for example pass it to a function and from this function the only my class instance you can use is the one which is passed into it you have no other object to use you cannot just use something globally right i'm probably repeating myself by now but it's very important for you to understand in much the same manner a provider declaration like we have here declaration is global but this is not a global variable as some critics may say sure the declaration is global this is what this variable is talking about it is a global variable my string provider but once you actually work with the state which is provided this state will not be global it will work pretty much in the same way as with this my class object that's because the state of providers is managed by a widget called provider scope and we are going to take a look at it very soon and this provider scope widget keeps our app maintainable and testable so essentially we could really say that riverpod gives us all the benefits of global variables without any of their drawbacks we can use them from anywhere and get to their state from anywhere but they are not global they're actually managed by provider scope which is very smart about how it manages them so let's now actually get to some real code in vs code here we are in the vs code and before we do anything else just make sure to go into your pop spec dial file and add flutter river pot 2.0.0 point something or dev5 if you are watching it fairly soon to the date of release and you can of course copy this version number and also get all of the code that we already have here or that we are just about to write from the article linked in the description so what are we actually going to build here as you may have guessed by this title yes we are going to build a counter app but this is not going to be just another simple stupid counter app we're actually going to expand on it and eventually we are going to even involve websockets kind of fake websockets we are going to involve a stream so it's not going to be your run-of-the-mill camera app that you all know and hate right so this is something a little bit more exciting i promise so how is it going to look like or at least one of its version is going to look like this because again we're going to build multiple different kind of versions of this color app to showcase different aspects of rear parts so that you can learn a lot about this server pod package of course so this is what we are now going to focus on in the upcoming few minutes of this tutorial so we are going to build an app which has a home page we can go to the counter page where the actual counter is hidden then we are going to be able to of course increment it right we can increment it and eventually we are also going to add a functionality to reset the counter from here right and when we increment it come back to the home page come back to the counter page the state will be preserved but we are also going to look at a way how to not preserve the state when we go to home page and come back to the counter page so we're going to cover all of this and even some more with the kind of fake websockets and streams and all that good stuff so you have a lot to look forward to and a lot to learn here so what we have here currently in vs code it doesn't really involve river pod in any kind of way because what we have here is really just a my app widget which is the top level widget which has a material app called counterapp the home widget is just a empty container as a placeholder and then we just basically do some theming related stuff like theme data and we set it to green so that it looks nice so what's the first thing we should do if we want to build a counter app well we obviously should declare a counter provider so much like you have seen on the slide before the way to declare a provider using riverpod is to just declare it globally now we're going to do this inside of main.dart but obviously if you are working on a larger project you can of course declare your providers in separate files so that you can keep your stuff organized and not just in one huge file and you just don't want your projects to become a mess and actually if you are the type of person who likes to write good clean code build really good apps and progress in your software development career to work on more exciting projects and also of course to work on projects that pay you more where you want to be a freelancer or you want to work at a job in an office or do remote work if you are that kind of person who likes to progress in their flower development career then you might be interested in checking out the flower developer boot camp where i take you through the journey of building real world apps very well in a maintainable manner so that you can become an asset to wherever you work or whatever project you want to build yourself so that they are going to be successful now i'm not just talking about any kind of a course it's actually a boot camp because you have me available on the discord server and also you have me available in weekly live q a is where you can ask any kind of question even the tough ones and you're going to get all of your problems sorted out and also the curriculum of the florida developer bootcamp is built in a way that you will truly see progress day by day as you go through it and again if you arrive and any kind of issues you have me available to sort them out so if you are interested in all of this and you would like to become the best flower developer that you can be check out the flower developer bootcamp from the link in the video description so what do we want to do we want to create a counter provider so that's going to be a final counter provider and this is not going to be just the standard provider as we did in the slides for the simple string because actually we want to be able to increment the integer which is going to be basically the counter and this basic standard provider is read only you cannot modify the value from the outside but we actually want to increment it from the outside when a user presses that well-known floating action button the counter should increment so we do want to modify it from the outside so what do we want to do well it's not going to be just a provider but it's going to be another type of provider state provider this state provider is very useful for managing these kinds of simple states in this case we have a counter but usually in some real world apps you would have like individual like i don't know toggles like booleans in here not very complex stuff really for complex things there is state notifier provider you can also use qubit with river pot which is something we are going to take a look at later on sometime in the upcoming tutorial of course you can of course use also block with rear part therefore you can use streams futures everything has its own provider and the state provider is really just for some simple simple state so the creation function of course takes the ref which we are going to take a look at later on but for now we don't really need to worry about it at all and we just provide zero to be the starting point of our counter so this makes the counterprovider a state provider hint but type inference works wonders so we don't need to write the type parameter here ourselves and now to make river pod actually work with flutter because believe it or not the river pod also can work with just pure dart apps you don't actually need to use flutter for airpod to work unlike with the default original sort of provider package which just is purely widgets it cannot work without flutter and it kind of depends on flutter right rear part is completely independent of flutter it doesn't depend on it the way you actually make river pod work with flutter is by wrapping your top level widget in this case it's called my app with another widget which is called provider scope and that's pretty much it all right let's just format this it looks nice this provider scope is the only widget we are going to really write when it comes to river pot or at least the only widget which wraps something right should i say so again unlike with the regular provider you are not going to be wrapping a bunch of widgets with provider here provider there everything will become cluttered no with throughput you just have one widget that needs to wrap something and it wraps the top level widget right and otherwise your providers are declared like this top level variables basically this provider scope is therefore responsible for managing everything and keeping everything in line with how flutter works everything will be disposed properly when a widget is disposed and the provider is attached to it basically the provider is also going to be disposed if you tell it to be we're going to take a look at that later on but just so you know everything is managed properly there are no like memory leaks or nothing everything is properly managed by this provider scope which is a huge plus compared to something like service locators which are notorious for not being tied to flutter really and you just need to like kind of make them work with flutter so that everything is disposed properly so that you don't consume memory when you don't need to you can release everything no things like this here rear part just works with provider out of the box and it's not even obnoxious you don't need to create a bunch of widgets everywhere this is it so now we have the provider all declared and set up also the provider scope but before we actually go ahead and implement the counter page where the text will be displayed and the floating action button will be because we want to showcase a bunch of things regarding rear part we also want to have the home page here but this homepage is totally dumb it's literally just a stateless widget containing a single button that will navigate to the counter page so if you would excuse me i'm just going to copy the home page from the written article again you can get to it from the link in the description and i highly recommend that you do so because you will be able to copy this code also without any hassle from the oracle so home page is literally just a scaffold and button elevated button that navigates to a counter page which we currently don't have yet but we're going to create it uh right now basically right after we set the home page to be the home widget of our material app just like that so now let's go ahead and create the counter page shall we so we're going to start it off as a stateless widget counter page and this is where we are actually going to use the counter provider from but before we worry about any of that let's just first build up the camera page so that it looks as it should but it's not going to have any functionality just yet so let's start out by making this container into a scaffold of course and this scaffold will contain a bar classic app bar which will have title oops which will be const text counter right so that's pretty straightforward and then we are of course going to have the counter text so this will be a body of the scaffold which will be centered text so center text oops child text and this text for now will contain just the hard-coded number zero which we can need to convert to or we actually can just write the string of course and we also want to style this text so we're just going to come in here and say that style is theme dot off dot context text theme dot display medium this is going to make it look nice so this would have the text handle then of course we also want to have the floating action button so this is fairly a classic thing when it comes to counter apps of course so floating action button will be a floating action button that is going to have a child this channel will be icon icons dot add also make this enhanced and of course we also want to have on pressed here so on rest which will be just a blank function for now so let's check out how this looks right now it should be looking pretty much the same as in the showcase app i showed you before and here we go we can go to the counter page from here which does its thing and of course we have the text and defaulting action button which currently doesn't do anything but that's about to change right now so let's do just that what we want to do here is that firstly we of course need to be able to increment the integer held inside of the state provider whenever user presses the floating action button and then once that happens we need to be able to get the integer from this counter provider and show it inside of this text so this means that in addition to just getting the value out of the counterprovider we also need to be able to rebuild this widget or at least the text widget but we're actually going to rebuild the whole widget when the integer is incremented when the value changes so these are the two things we are going to focus on right now and for all of that to happen we need to have access to the counter provider with riverbot to get access to your providers you need to make your widgets into consumer widgets so here we go consumer widget this will add one more parameter to the build function which will be of type widget ref let's call it ref and now we can use this ref to obtain like watch read listen to we're going to cover all of these terms what they mean but we can do pretty much that watch read listen invalidate reset whatever individual providers using this widget drive object and by the way you can also access your providers by not just always making your whole widget into a consumer widget you can also use different ways you can also use your providers not just from a stateless widget which doesn't have any state right you can also use them from state full widgets which have the widget and the associated state i'm not going to cover that here because that would take quite a long time but of course i recommend you to check out the documentation of riverpot once you know the basics from this tutorial going through the documentation will be very simple you can just pick and choose what you need to know links to all of that are in the article of course what we now want to do is that inside unpressed we want to increment the state so that means the integer we can do that by getting hold of this widget ref called ref and then we have a bunch of different options now we want to choose read and what do we want to read well we want to read our counterprovider and increment the integer so can we do something like plus plus here well not quite this read what it's going to give us if we take a look just put it in here this x will be of type ins and sure we can increment this hint right here but this is just a local end it's not referring to that end we have in the provider state so that's not going to do us much good so instead we cannot just read the counterprovider which will get us the state we don't want to get the state here we actually want to get to the actual thing which handles the state which we can increment we want to get to the mutable part we can get to that by calling notifier or by getting notifier this is specific of the state provider also of state notifier provider so really all these kinds of providers have their specifics which you can learn about either from here if we cover them in this tutorial but there are way too many providers to cover so you can of course learn about everything from the beautiful documentation that riverpod has and this notifier which manages the state exposes state and the state is actually the int but this time when we get this hint it's actually the mutable end we of course get to it through getters and setters but this is mutable if we mutate this it's going to mutate the actual state held inside of the provider not just some local ins as we would have done previously before we use notifier and state so incrementing the integer is now handled how can we read it right well we want to read it kind of from here from this text but actually we can just read it at the top of the build method it doesn't really matter and put the result inside final counter or in its counter to make it clear and how are we going to read it well we are not really going to read it we are going to watch it by calling ref dot watch and now we want to watch counterprovider and this time we actually just want to get the int we don't want to mess with the notifier and stay because we don't want to mutate anything we just want to read it but why are we here using watch and here we are using read well these two verbs kind of speak for themselves if you're familiar with this kind of programming flutter terms already from other packages or classes watching something means that it's a continuous thing we are watching something and if this value provided by the counter provider changes this watch will make sure that this consumer widget in our case counter page will get rebuilt so we get automatic rebuilds if you say rev.watch the counterprovider value changes the whole widget is rebuilt on the other hand ref.read will not rebuild anything if the value changes this is just a one-time read and this is precisely what we want inside unpressed because this is a function which gets triggered by the user when the user presses on the floating action button so we don't want to watch anything we don't have anything continuous to do here we just want to read it one time increment it and we are done and actually if we used watch from this unpressed handler we would get into a lot of trouble so we don't want to do that even and now we have this counter readily available so we can just put it here inside the text say counter dot tostring let's just hard restart the app for a good measure and let's check out how it works now go to counter page increment boom nice works nicely go back all right we go back to counter page the state remains present here so how can we make the state just be reset whenever we go to the home page and then come back well we can just use the so-called auto dispose modifier on our state provider so we're going to say stateprovider.autodispose and just like that of course now we have errors because we have changed things while the app is running so let's just hard restart and now if we increment go back go back to the counter page the state is reset and you may wonder why would we want to do this like why on earth would this be valuable well with this counter it may look kind of silly and i don't blame you for it it actually is silly but if you have some real world app and you are in one page or in one part of the app where some expensive object is used it takes up very much memory and so on if you exit that page or that part of the app you probably want to release the resources held by that expensive object you just don't want to keep them in memory forever right because it's expensive maybe even the user will not come back to that part of the app very soon so it would be unwise to just hold resources in memory when they don't need to be in memory right you just want to release everything you want to keep your app consuming as little as possible because the battery life will suffer otherwise and all that bad stuff will happen right so in that case if you have some big object disposing of things whenever they are no longer used is very handy and how does riverbot know that our counterprovider is used only from this counter page and not from the home page therefore when we come to the home page it's disposed how does it know that right well it all has to do with how providers code manages stuff and also how consumer widget remembers stuff and also passes information to the individual providers which are used within this consumer widget that hey i have been just disposed if you are used just from me meaning from this consumer widget you probably might might want to dispose yourself as well right but we don't need to worry about any of it it's all handled by rear part we don't need to write that disposal code no disposal logic we cannot even forget about anything all we need to do is just add this auto dispose modifier and its handle for us zero hassle edit let's now remove this auto dispose modifier because it's not very fitting for our app but it's good to know about of course now we have errors so let's not restart but now let's say that you actually want to dispose of the state or reset the state manually how can you do that well inside counter page in the app bar let's create one action which will be icon button and in the on press we want to reset the state and the icon will be icon icons refresh all right and so how can we do that when this button is pressed which looks like this we will want to reset the state actually we are in the wrong page so not home page of course but counter page sorry about that so how can we do this that when this button is pressed the state is reset well it's pretty simple you may have already seen the function before as we were writing the watch and read functions this time we're going to write ref dot in validate and we want to invalidate the counterprovider what this is going to do of course is obvious when we increment the provider we invalidate it it gets reset back to its original state which is zero sometimes you may also want to use refresh instead of invalidate the difference is that invalidate is a bit more optimized but also refresh returns the newly set state in this case it would contain the value 0 because that's the default value whereas invalidate returns void so it returns nothing so by now you've seen that we can use watch to continuously well watch a provider and rebuild the widget whenever the value changes we use read to perform one time read and this is very useful and actually mandatory from something like unpressed callbacks or buttons and stuff and then we also have invalidate which resets the state but how can we trigger something like navigation or show snag bars or dialogues alerts and so on or any kind of other action how can we do that let's say that we want to show a kind of stupid but still and a funny alert whenever the counter value is greater or equal than five because by our rigorous research we have determined that uh the counter value five is dangerous so we want to warn the user that hey you are in danger the counter is five or more than five right we want to show an alert dialog when that happens well kind of we have this counter value already available here but of course if you've been doing floor development for quite some time you know that you cannot just come into a build method and start navigating or start showing alerts or snag bars from here because you are going to get the infamous error set state or mark needs build called during build basically it's just impossible to perform some kind of action which draws something while you are drawing something on the screen because you are inside a build method already so you need to put this snag bar showing or alert showing into a separate function which is run after the build has finished so therefore using watch for this is not possible instead what we are going to use is ref dot listen this also continuously listens on our counter provider in this case but instead of putting the value into a variable like this we are instead going to receive the value inside a callback actually two values previous and next we are not really interested in what the previous value was so we're just going to focus on the next value which is currently actually the current value right for some reason we have two parentheses pairs here anyway here we can check if next is greater or equal five and if it is which obviously currently it cannot be because type inference doesn't really work here so we need to say that listen happens on type int just like that everything works and if it's greater or equal than 5 then we want to show a dialog and to spare you from this dialog code which is kind of monstrous unfortunately i'm just going to paste it in here because it's very very simple what we do here is just show dialog and say that the counter is dangerously high and then we can pop the dialog from the ok button so let's see how that works after we fix this code by adding a parenthesis and everything all right then after fixing the missing parentheses and curly braces let's see how that works so we increment the counter number five and we get warning dangerously high counter consider resetting it and we always get it until we reset it and now we're safe unless we increment it back to five and then we are no longer safe so this is how you can perform some actions like navigation or showing alerts showing snag bar or any kind of other logic which needs to happen only one time per state change because as you should know build functions are not good places to run your logic which needs to run only one time per state change because even if you are not showing dialogues or you're not doing something which will give you that infamous error which says mark needs build called during build even though you're not going to get that error still if you have something like if next is equal to uh 3 and you do some logic here right or in this case it will be if counter of course logic inside of here can actually run multiple times because build function can run up to 60 times a second even maybe more if you're animating the widget so you cannot rely on the fact that if statement will just run once inside a build function so every logic should happen inside listen when you are working with providers and you need to run some logic or show dialogues and stuff up until now we have worked in this app with just a single counter provider so there were really no inter-provider dependencies we needed to resolve but in the real world apps of course you are not just going to have one single counter provider you're going to have a bunch of providers one can be for a qubit or change notifier this will depend on a repository which is provided by yet another provider so you're going to in real apps have kind of chain of providers which which provide objects that kind of depend on each other and you need to be able to resolve all that thankfully providers make dealing with dependencies totally simple and in fact even though you may not know it yet you have kind of seen the syntax which is used for dealing with inter-provider dependencies just saying you will see once we actually use that so let's say that we want to upgrade our familiar counter app to be a lot fancier because everybody knows that keeping all of your state just local like this is lame you know and the cool kids put everything on serverless servers and we surely do not want to fall behind this trend of course so we will create the ultimate counterapp that gets its color integer values through a websocket well sort of of course because we are not just going to use actual websockets we want to keep this app tutorial friendly so we're just going to fake everything with the fake websocket clients which will just be a local stream of data but nevertheless this would all work for like actual websockets even right so what we are going to create now is a websocket client which i'm just going to copy and paste from the written article and also its implementation fake websocket client but of course you could apply this interface on a class which actually communicates with a websocket that's totally possible and in here we have a function getcounterstream which in our fake implementation will of course return stream of integers and this stream of integers is just going to be constantly incremented starting from the value 0 after 500 milliseconds it's just always incremented and we are yielding a new value into the stream so every half a second the integer will be incremented and it will be sent down the stream and wherever we then consume it so there are going to be no like buttons involved no user interaction everything will happen sort of like from the server from this fake server of course big websocket client so let us provide the big websocket client right we're going to create a provider final websocket client provider which is going to be of type just a regular provider and let's also use this websocket client abstract class type so that we don't expose to the outside world that we are actually using a fake implementation here and we are just going to well return from here the fake implementation fake websocket client so this is pretty simple but this is not the end provider that we want the ui to have access to because yes this provides the websocket client but we actually want to get to this stream of integers that's provided only once you call getcounterstream on this websocket client so we need to provide the stream also right so we're going to provide this stream in a provider called counterprovider again which will no longer be a state provider but instead a stream provider let's also designate that it's going to be of stream integers or stream int and let's make this into a blank regular callback and so what needs to happen from within this callback function we need to get access to our websocket client which in this case is the fake websocket client but of course we could swap it very easily using providers to a real implementation that's the beauty of it all inside a test we would of course use this fake websocket client so that we don't communicate with a real server but inside a production app we would use the real implementation but how can we access this websocket client from the counter provider we need to access this provider from counterprovider and the way to do that is by using this ref parameter which is not widget rev this time but it's instead a stream provider ref but it works pretty much in the same way what we can do is call ref dot read or rev dot watch rev dot listen all this remains the same you have also some other methods you can call like on add listener on cancel on this post but this time we just want to call rev.watch and we want to watch the websocket client provider so this is exactly the same syntax as you've already seen we're doing the same thing we're watching websocket client provider previously we of course watched the counter provider here same syntax so what we want to do from this counter provider of course we want to put this websocket client into final ws client and now we want to return wsclient.getcounterstream so now this stream of integers which are incremented every half a second is available through this camera provider now let's go ahead and use it because our counter page code is currently quite broken because we are no longer dealing with any user interaction nor with any just state provider we instead have a stream provider so let's reflect these changes in our code shall we firstly let's remove the user interaction so we're going to get rid actually also of this listen because that's gonna become quite obnoxious the listener goes away also what goes away is the floating action button because there is no need for it we don't have any user interaction because we are cool and we handle everything through websockets serverless servers right we do want to still watch the camera provider but the difference is that now it no longer provides just an integer instead what it provides is an async value which wraps an integer because we are using a stream provider this allows us to use some optimization so that we don't actually need to deal with just plain streams in our widgets which would require us to use stream builders and so on but we don't want to use those stream builders because they are quite cumbersome to work with right so instead of just having a stream here that you need to handle through a stream builder you have async value and of course it still applies that whenever the stream changes its value and you receive new async value this whole build method will be rerun so the widget will get rebuilt because we are using the watch method here also let's remove this invalidate action button and let's restart the app while we're at it now of course if you want to use stream it's totally possible you just need to say counterprovider dot stream and now that's going to give you a stream of integers but again we don't really want to do that so let's just stick with async value but again the rear part is very versatile so if you just absolutely need to have stream present you can do that too so this counter is of type async value no longer it's just a simple integer but let's just leave this text to directly convert counter to string and see what happens once we open up the app go to counter page boom now we see async data ins and the value is of course incremented as it should be and also when we go away from this page wait for a while i'm back it's now 20 6 what it's 30. let's wait for a while it was 30 when we went away now it's going to be like 44. so the counter keeps on counting even though we are away from this page because we don't have the auto dispose modifier on our counter provider right now but of course we don't want to have this weird async value displayed here so what can we do how can we display just this integer well the async value is a union which kind of works like freeze unions so if you are familiar with the freeze package you will know immediately what i'm talking about if not no worries what we can basically do with counter is to say when and when the data is uh well data this means that there is readily available integer value in this case which we can display so in value and we're just going to get the value out of there there is also an error case on this async value so if some kind of an exception happens you're going to get this passed in this error clause of this union async value so this will give you object e which will usually be an exception but it also can be any kind of other object because of darts history and also a stack trace but we don't want to worry about the stack trace so we just give it an underscore and we're just going to return e from here which is of type object and we also have the loading case and the async value will be in the loading case until it receives the first data value so the first integer or until it receives error whichever comes first until then we're loading which basically means that we don't have a value yet because streams are asynchronous so of course you well it can happen that you don't have a value yet in that case we're just going to return 0 because while we are loading the first value from the stream we want to display zero in the app for nice user experience and now let's just call tostring on whatever is returned from this when function because whether it's the actual value or the error or just the zero we just always want to display uh it inside of a text so we need to convert it to string just like that when we come back to the app now the counter is at 250 so it never stopped counting but it looks much nicer now lastly let's deal with one more thing in this tutorial the current implementation of the counter clients always starts from zero but suddenly our customers started giving us one star review saying that they need to be able to modify the starting value of the counter and so we naturally as great business savvy programmers implement their feature as fast as possible so that bad reviews cannot damage our reputation out there so first we of course modify the implementation of our websocket clients or fake websocket client then we modify the interface of the websocket client so now it will look something like this and of course i copied this from the article again you can get to it from the link in the description what happened here is that we just simply added an optional parameter integer start by default it's equal to zero and the starting value is of course taken from this start integer and not just hard coded to zero and that's about all the difference there is so now what needs to happen is that we need to be able to pass in this starting value into our counterprovider right because we absolutely need to be able to pass our starting value into this git counter stream right it's optional so it doesn't scream at us with errors but we totally can pass in like 5 or 10 and we want to be able to do that but not hard coded here we want it to happen from the user interface because the user should be able to pass whatever value the user wants by a slider or maybe there is a text input field where the user inputs values and whenever we watch the counterprovider we need to be able to pass in the starting value right here so how can we do that how can we pass something into a provider because when you think about it until now every single provider we have taken a look at always contained everything it needed we never needed to pass in values it always contained all of the values it needed by itself no outside values were needed so how can we change that well it's very very simple with rear part and that's exactly what the so-called family modifier is for so we're going to scroll up into our counter provider we are going to make this stream provider into a family and now it needs to take in another type parameter which will be again int so in this case these two type parameters are identical but the first one is the type of the stream so we have stream of integers and the second one is the type that you want to pass in so this is the starting value right and by the way you can totally make your uh providers both auto dispose and family at the same time it's not a problem you can do it like either like this although this pose comes before family or auto dispose comes after family however you want it's totally possible you can use multiple modifiers on a single provider no problem now this integer will be passed in as the second parameter of the callback so let's say that it's going to be called start and now we can pass the start value into our get counter stream as easy as that and we also want to pass the start value into the counter provider now of course in a real app if this was not a tutorial we would let the user pick a value by a slider or through a text form field or something like that but here we are just going to hard code it right from the ui let's say that the start value is going to be five of course we have problems so let's hard restart and we go to counter page boom and it starts from five of course though we cannot just do that because as you have seen when it starts from five the initial value is zero 0 and it jumps to 5 so we probably would want to either move this yield to happen before we await the future so that we immediately have a value so let's restart again and see how that works now boom and we see five immediately and it starts incrementing from there or also if we didn't want to do this we want to keep the old implementation of the fake websocket client we would probably just want to also modify the value for the loading status so that would be five again also and it would look something like this all right and just like that you have learned how to use the powerful river path package by building and expanding upon the simple counter app so you're now ready to employ all of this knowledge in your own complex and cool apps that rear pod makes hassle free to build and easy to maintain or at least when it comes to getting the objects around your app but at least river pods takes one painful thing away from the app development process and you can focus your efforts where it's actually needed creating great apps great looking apps focusing on the logic and riverpod will take care of all the hassle for you when it comes to providing things around your app and doing state management so to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flower developer who can build real apps for clients or at a job go to flutter.education link is also in the video description by the way to get the top created floor news and resources aimed at improving your app development career because over there you can also subscribe to my mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this about riverpod about state management but also about design be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you're growing your flutter skills because here on riso coder i am determined to provide you with the best tutorials and resources so that you will become an in-demand clutter developer all right so if this video helped you give it a like and also share with other people who are surely going to benefit from it too leave a comment if you have anything to say and see you in the next video [Music] you

Channel: Reso Coder

Views: 104,032

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter riverpod tutorial, flutter riverpod, flutter provider, flutter state management tutorial, flutter state management provider

Id: Zp7VKVhirmw

Length: 63min 37sec (3817 seconds)

Published: Fri Apr 22 2022