Flutter Tutorial - Riverpod - 1/3 The Complete Guide For Providers

riverport is the state management which is in addition to the provider and fixes some of the limitations the provider has riverpot has three main advantages over provider firstly it doesn't depend on flutter and its build context which means you can listen to the providers and your state without the need of using a build context secondly it ensures compile safety and with it it supports multiple providers instances of the same type thirdly it provides new features which improve the performance of your application with an additionally inbuilt caching system this video is sponsored by invoice ninja invoice ninja is one of the largest open source platforms for invoicing if you search for something to manage your invoices with flutter and handle also your online payments this service might be something for you and to get started with this invoice ninja plugin you find the link in the description box of this video if you want to have a clearer view on all the limitations the provider has in detail i recommend you to watch this tutorial of razor coda and we will focus in this video instead totally on the solution how river pod works and what you can build with it in this video we will learn about all the different providers and also notifiers river pod has to get started with riverport you have three options to choose so first of all you can choose flutter with hooks then you need to put these dependencies in your project if you only want to use flutter without hooks then you use this package and that's what i do and if you only want to use start and not flutter then you can also use this package here which is only for that then you go to your pubspec journal file and paste the dependency here inside like i did and put it simply under dependencies in this video we will build this application here where we build for all the providers a use cave and we also look later at the notifiers and modifiers so that you have all the topics of riverport in this video the first thing which you need to do is to go to your main method and put a provider scope around your app and here in this provider scope basically all the state of the individual providers which we later create are stored providers are the most important part of riverport and basically a provider contains some state and also enables you to listen to this state which this provider contains and the easiest solution to use a provider is the provider itself so you simply can create a provider object and this provider exposes some state so for example an integer and you simply return it here however this provider is so simple you cannot change it you can only provide here an initial value basically we use here a global reference to our provider however the state of this provider this 42 is stored locally so basically it will be injected later in our main file here inside of our provider scope and is therefore locally so only the provider definition is global the state is locally stored the advantage of the provider is that you can use here this reference and with this reference you can later access other providers also and we will later look more deeply into this case also now we want to access this provider value within our build method and therefore we simply create a consumer which is also from this package and here you get a builder and basically this builder has this watch message here where you put your global instance or your reference to this provider inside and then you get here this integer back and here we get simply this 42 as a number and then we can also put it here inside as a text and after we have hot restarted you see that we have here our 42 which is exactly what we got from the provider later we will also use other providers which can change the internal state and therefore this consumer is really practical because it will only rebuild this part of the application to which we are currently watching and the other parts like for example this one is not rebuilt and therefore this is a performance advantage let's also look at another case how we can consume here values from our provider therefore we simply can exchange the stateless widget with a consumer widget and then we have here in our build method next to the context also this watch and with this one we can then easily access here our provider so we simply put our global instance inside and then we also get here our number and lastly we then simply display here the number inside of our build method and like you can see this is also fine and if you have later another provider which can also change his state then this whole method will be rebuilt every time so also the scaffold will be rebuilt also this app bar and so on so this consumer widget is more comfortable because you have here less code however the other one if you use this consumer directly inside of your build method is more performant all in all with this consumer widget and also with this consumer you can simply listen to some providers and you can basically also put your other providers next to it inside and can also listen to them and get some value from them and every time if there are any changes then this ui will be rebuilt let's also look at the state provider and the state provider enables you also to change your state so you can have a default value for example in this case a value of zero and now we want to make use of this provider so we simply reference it here with our watch method and again we use here this consumer widget to have our build method with this watch method and then we get our provider and inside of this provider we can then access the state and this will then return us our state so our integer in this case we want to display this later in our text widget and therefore we also make it to a string and put it then here inside as a text widget so by default we have here this zero as a value which we have defined every time if we click here on this button then we should increase this counter so we go to our unpressed handler of this button and every time call here the provider and the state and then we will simply increment our integer value let's try it out so i click here and you see that our integer value got increased in this case here we use the provider out of our watch method and this is not totally recommended so there's also a second case which you can use so you can call your contacts.read and then you can put your state provider inside and then you can simply increase your state so this is our second method how you can increase your state and this also works pretty fine if we now go here in our application back and we have here this 22 and then we go again to our state provider you see that we keep this date and if you don't like this behavior you can also put here this auto dispose inside and this auto dispose will make the provider automatically destroy its state when it is no longer listened so that means if we have our state incremented and then go back then there is no listener anymore because this widget here got destroyed and therefore also our state gets destroyed and if we now go again to our state provider then you see here this initial value and we get here a new state object you can also use the future provider and this means that you can simply make a request for example to an api which takes some time so here we make a api request with fetch weather and now we simply simulate here an api request so it takes here some time so we wait simply a little bit and after we return here value and basically you can put here your logic inside which is then calling a server or something and now we can make use of this future provider within our build method so you simply watch this future provider and then you get this future back which we want to put inside of our body property and here you can call this future when and with this one you have three states loading arrow and success state let's start with the success case so we call here data and here we get then the value back in this case this 20 and we simply then want to display it inside of our app here in the middle and we also have a loading case so we simply show you a circular progress indicator until we have loaded this value so our loading indicator will show for 2 seconds in this case and then it will show our value and lastly you can also set the error case so you get here the error message and also the stack trace and then you can simply display it in your app or whatever you like to do with it let's see it now implemented so i click here on future provider you see the circular progress indicator for two seconds and then our value got loaded from the api the great thing about riverport is that it automatically caches this number which they get from the api and also if we now go here back and go again inside you see it is cached we don't load it again and also if we have for example use case where we fetch the weather from different cities he will always cash the cities which he has already loaded and will return us the value this can be a good thing and it can also be a bad thing so if you don't like it you can always put here this auto dispose inside like what i have shown you before and if you do this then you need to hot restart your application and then you simply can try it again out so we load this value and if we go back and go here again inside he will again load this value we want to look also on the stream provider the scope provider and lastly i will also show you how you can combine multiple providers and yeah by the way if you want to get this whole source code you can get it with the first link in the description and with the second link you can get my flutter course where will teach you how you can become a more advanced and better developer now we want to build a small counter app and therefore the stream provider is really optimal so you simply can create a stream provider and then it returns a string and this is then a counter and we want to return it here as a string this number and then you call here stream periodic to create your counter and after each 400 seconds we want to simply return a new count so he will simply increase all the time the counter by one and now we want to make use of the stream provider within our build method so we go here down and create our build stream builder and we also put here this watch inside which we get from the consumer widget the next thing is to get here the stream of our numbers so here we call the watch again and put our global instance inside after it we return here our stream builder and here to get a stream of this we need to put also a stream after the stream provider so we want to actually get the real stream out of the stream provider and then we can call here stream stream so we put simply the stream into our builder and then we want to build each individual item so by default it would look like this so you have here a waiting stage you have your an error stage and also the successful stage where you simply display your text widget and this is how you can build your stream however there is a more simple solution with less code lines therefore i will command the current solution out and we want to look at the new solution the best solution to show the numbers of our stream is by first of all calling here this watch and then we put our stream provider instance inside and after it you simply can call here the stream and then like before when we use the future we use here this when and again you have these three stages the successful case the loading case and the error case let's start with the successful case so we get here every time this counter after each 400 milliseconds it will be incremented and then it will be here updated as a text and we also put here the loading case inside so it is simply a circular progress indicator which is showing here and we also put in error case inside let's try this example out so we go here inside you see a loading indicator at the beginning and then it is simply counting all the numbers up right now we have you this auto dispose inside which means if we go back then the state will be destroyed and if we go again inside then it will go again from zero if we wouldn't have this inside then the stream will always update all the time also if we are not there if we don't have this autodisposed inside then it will look differently let's also look at this case so we go here to the stream provider then he is simply counting some values up and now if we go here back then he will stop and we can go again here inside and you see that he will count all the time further even if we are not inside of this page lastly we want to look at the scope provider and here we simply return by default an unimplemented error you can also put here some default value inside if you like and what you do then is to go to your build method and we create a new method build scoped and by default we want to override our scope with the value of 42 so because right now every time we have here this unimplemented error however for some cases you can then override this value which you have here inside and therefore you simply call this consumer and like we learned in the beginning we have then this builder and with this one we also get access to this watch method and with this one we can then access our scope provider and here we simply return it as a string and then we return here text widget with our number and this widget is basically consuming then this value from our scope provider and now we want to check here if we have this value supplied because this is an optional value and if it is now then we want to simply put our consumer here inside and if it is not now then we want to override it with our value which we get here and therefore you can use the provider scope and this has a method which is called overrides and here inside you can then override the value for our scope provider so we simply take our scope provider and here by default we have this through unimplemented error inside and we override it with this new value which we get inside of our build scope so in this case we get for example a value of 42 which we then override inside of our scope provider and this override will only be for this child widget and not for the other parts of our application so if we try this example here out you see that we get here the 42 instead of this throw unimplemented arrow because we simply overwrite here our scope with a new value let's also look at some other cases so we put here column inside and then you can also build a scope of 90 and then it is returning here this value of 90 however if you put your no value inside then it should throw an exception because we put here no value inside and if we have no value inside we simply return here this consumer and the consumer will then consume the value of the scope provider and by default this is unimplemented error and then it will throw this exception here in our application and this is totally intended in this case however you can also have here for example some default value which is not an exception and this should also work so let's go here again to our scope provider and you see that we have here instead this initial value inside lastly as a small bonus i want to show you how you can combine different providers and therefore we create here simply a future provider like what we did before and we also called here fetch weather only that this time we also want to put here a city inside and depending on the city we will then return here a different degree of our weather so let's put here a city inside and we also want to get our city from a different provider and how you can do this is by accessing here this reference and then you can watch also another provider and here we simply create our city provider and this is the normal provider what we learned in the beginning so this is simply a provider for returning some state and in this case we put here munich inside which is also here and then it should here return 20 degrees inside of our application lastly we need to go to our build method and get then our future provider so we simply watch it and inside of our build method we call future.when like what we did before then we have here three cases data loading and error and then we simply show here this successful case and then it will show you our 20 degrees inside our app after it is loaded and everything works fine and if we would change here this provider then it should show a different value so let's hot restart our application and now you see that we get here this other value of 15 because we have a different city inside and as a hint invoice ninja has built an app with flutter for managing invoices and this flutter app is open source and you can check it out this app and also the source code on github hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Applause] [Music] you

Channel: Johannes Milke

Views: 12,326

Keywords: flutter riverpod, flutter tutorial, flutter riverpod tutorial, flutter, riverpod tutorial, riverpod vs provider, flutter riverpod example, flutter state management, riverpod state management, riverpod stream, programming, flutter statemanagement, flutter riverpod guide, hot to use riverpod flutter, flutter riverpod state management, flutter riverpod for beginners, flutter riverpod introduction, flutter for beginners, flutter state

Id: 8H3bwxxla4Y

Length: 19min 26sec (1166 seconds)

Published: Wed Dec 09 2020

Reddit Comments

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/riverpod_providers_example

Follow me on Twitter: https://twitter.com/JohannesMilke

The state management with Riverpod has many advantages over the Provider such as higher performance and more comfortable usage.