Provider State management - ChangeNotifier + Flutter

hello my friends and welcome back to another episode of flutter explained today we want to talk about the most liked package on pop def provider we want to have a look why it is so popular how we can implement it and what problem it tries to solve and without further ado let's get started provider is a wrapper around inherited widget written by Ramirez let the inherited widget is therefore there to propagate information through the widget tree in a very efficient way if you want to know more about the inherited widget and how it works I give you a link up at the info box where Philip Hetrick and the very good flutter team provides us more information and how you can use it with the inherited widget provider gives us the opportunity to provide information down to which a tree where it is necessary and so the provider gives us the data there where it is provided additionally it will enable us to simplify their location and Rick's disposal of the provider down to which a tree so that means if the widget is getting disposed the provider gets disposed as well with that mentioned it is possible to lazy load our different widgets whenever they are necessary and with that the provider gets initialized when we need it and get this posed as the moment as we don't need it anymore this helps us if we remember from the set state video there we had this problem with the lifting the state up and we can now get rid of that problem we can now they provide the information that we need up in the widget tree down to the widget tree with as less boiler plate as possible and provider will help us with that this gives us a friendly way to consume the information down the widget tree last but not least it also improves our scalability if we want to go into higher and bigger applications because of its fantastic listening mechanism that it would take from the change modifier with all that in mind we know now that provider delivers us information down to which a tree but what is it actually that we get provided well the provider package has already some pretty provide us for us but we can also write our own if the provider package has already some prepared providers for us in plates for example the provider itself so the provider itself is therefore there to return as a value down the widget tree without listening to it so it is just the plain provider that most of us know that if you want to use values in that case then we have the listenable provider the listenable provider has the option to listen to changes of a variable inside of it and react to the change and allows our consumers to react on this change and rebuild the widget tree this behavior is additionally helpful if we want to have full control over our change and if we want to work with animations for example but in most of the cases we will work with a change notifier provider and this is also the example that is in flutter repository for state management and we will work today with that solution the change notifier provider is an implementation of the listenable provider and exposes its values to the descendents the change modifier will trigger a rebuild of the widget tree whenever notify listeners the method that is enjoyed of a change modifier is getting called the last three of them are the value listenable provider which provides us now a value that listens on changes the string provider which allows us to provide streams down the widget tree and we can take the last instance that is getting returned through the stream a use case where a stream provider would be for example something like a battery level check or the future provider which receives us the information from a future that we can then use inside of our widget tree so if we talk about state management with provider we usually talk about change modifier with flutter I already mentioned the article from the flutter team that you will find down in the video description below where you find Doc's how you can use change modifier and flutter together but now Before we jump right away into code and implementing change modifier with provider package inside of our state management solution that we have already remember that I created everywhere to do that we can work simultaneously on the problem or that you can after the video try it yourself and challenge yourself a little bit and now sit back relax grab a cup of coffee and if you feel very generous today please give me a like and now let's jump into her first of all I want to thank Daniel you dad and X code snippets that you can see right away in the page image for the fantastic Edition for visual studio code that called to do tree the to do tree allows us to see the to lose weight easier and as you can see now if we have the possibility to see all the to deuce in a nice tree form in all the different files so this will help us to navigate and you will be most likely more happy with that alright so this time we want to solve the problem for this provider right so for that we created the 2news and let's start with the to do 0 we should add the provider dependency to add the provider dependency we will go to pop dot deaf and unpopped are deaf we are searching for the most popular package which is provider as you can see with 1300 likes it is currently the real winner here let me jump inside we get all the documentation that Remy created for us that we can read through but what we are interested at the moment is just how we can install it so we copy that part and bring it into our pops Becky Amma we remove all the comments and what I would also suggest is that we remove the to do 0 at this point so pop dot get is already cold and we have now the newest versions so now let's jump to our first to do that we want to solve create a drinks provider class we create a class drinks provider and extend from the class change notifier this is our class that we will work with and we can remove the first two to lose with that now we should initialize a state with drinks so to initialize a state in provider we just have to give it a tribute or property so in our case we have a list of drink which are drinks and we initialize it with a list of drink we import the package for drink and the package for material widgets in that case or we can even take the foundation because the change modifier is a package from flutter itself we have the opportunity to import it from a very low level which doesn't include so many other dependency so we will decide for the foundation in that case okay so let us initialize the state currently I still have to state in set state and we can just copy this list of drinks so with that we have initialized a variable called drinks and I will make this one private because this variable should not be overwritten from somewhere outside because this is special for the change modifier we always want to trigger when we change this variable notify listeners but we will come to that in a second initialize the state with your drinks so we have done this to do number four write a get method for the drinks so because this drinks here is at a moment just private so only existent for this class we want to write a gather function so we will return a list of drink and what we want to return is the private variable fantastic now the outside world has access to the variable from this provider if it is necessary with that we have already 5 - dues solved and now we are coming to the next one in our main dot dart we have the register the change notify a provider what does it mean register this is the level where we allow the change modifier to expose their values to the widget tree down this means everything that is contained of this change notify our provider later will have access to the functions and properties from the provider that we pass into it in our case that will be the whole widget tree because we have here a very small use case so for that we wrap this one in a widget that one is called change not a fire provider and this is now the first time that we actually in port to provide a package and you will immediately see that this part is getting yellowish that is because we have now to pass a second method inside which is the create method this create method receives the context so this is a build context but we don't use it yet so for that I use this underline which just tells me I don't use this method ever variable now we make a fat arrow and create our new drinks provider here inside of course we have to import that one and with that everything is green and we have already solved to do number 5 and 6 we have the chance to see the change modifier in our widget tree and we have also the first stage that we have initialized inside of the drinks provider inside of the widget tree so let's jump into to do number 7 to do number 7 tells us to surround our column with the consumer widget this is pretty close like the cubed solution but now we have here a wrapper from consumer and here we have to tell which which type of provider we want to get because for example a value provider would get just a value so we could write here a string for example but in our case we want to get the full class of drinks provider so you can see it's getting red because we have to import the package of provider again and now it's getting yellowish again that is because a consumer is consistent out of a builder and a child for us important is that the Builder whenever we call later not if I listener in our provider class so enterings provider this consumer builder function is getting re triggered and this function contains a context which is our build context the value this is actually our provider or our drinks provider and a child and important note here if you want to set on performance this child is not getting read rigored if notify listener is called so you have the option to declare a child that's not getting rebuilt and you can reuse it whenever you need it and now in the next part we want to pass the whole column inside that is currently as a child registered so this means whatever is inside of this build a function has now access to the drinks provider and this we will need at to do nine so we can remove these two two dues and we stick with to do number nine here we are talking about receiving the drinks from the provider and this is pretty easy to do we just say instead of these drinks which is currently declared in a stateful widget which we will get rid of after that we can now declare here down here that we want to get the information from our drinks provider dot and now we asking for the values drinks thanks to our get a method into the drinks provider that is here we have now access to our state that we declared in that part so if we jump to the to do number 10 we can see we need also an implement select drink method and this one we have also created already in our set state and in the cubed solution so I will just put that here inside alright so I added the selected drinks method which gets a drink and the selected property and now what I'm doing is I search inside of our drinks list up here so in our state for the first element which the name is exactly the same like the name of the drink that we want to select and after that we set the property selected to select it the important part here is down there this notify listeners this call to notify listeners will now execute all consumers to rebuild their build method this means when we jump once more back to the new number to do number 11 this whole part of the column this whole part is getting rebuilt so our UI will improve with the new status and this is the reason why we needed this getter function here because now it is not that is impossible to just override or change the values without calling dis notify laziness this solved to do number 10 so let's jump to to do number 11 call the Select drink on the provider okay we have now access thanks to our consumer up here to the drinks provider and we can call now the function that we just right now wrote select drink we pass down the drink which is the drink itself and the value which comes from the unchanged method so let's jump to the last two the third third last one implement a getter function for selected drinks this makes sense because what we can do here is we get the selected drinks and this are the drinks where the element dot is selected and we call to list on the end fantastic with that we get the selected test at drinks that we can now use at 13.1 and 13.2 so let's jump there back and what we can do instead of using this drinks here we can call again the provider so the drinks provider and receive the selected drinks because everything else is not necessary like this where anymore and at least part because we get already our elements we can just have this in place like that and this looks way cleaner we can remove this and we are done with our to do the next part is down here where we received the selected drinks from the provider so I replace that just with the elements that we received and then dot length so if we jump into our application and start it up you will see up here all the different parts and if we selected the order is already selected so the notify listener is retrigger ngey Scullin down here to display the different values and updates the state here so we can change that and with that we have more control our over our state a last thing that I would like to mention is that we can now remove our state from the state full widget here and call it estates les widget because we don't have any state anymore in the Czech props provider screen we keep the state inside of the provider and thanks to notify listeners we are having a reactive way of our app to work with different values here another thing that I would like to show you is where the drinks provider is living in the widget tree so you can see up here that the change modifier is living currently underneath the material app above all the other parts but this means all these widgets down here has now access to this drinks provider sometimes this is not wished but you have the possibility to split up all these registrations on the views where you will need your change modifier provider so you don't need to have only AM global State you can also create local state for the different views that you want to create now we have seen how you can implement and use the provider and we saw how easy it is to implement the provider and have a reduction of the boilerplate with all that said state and so on so we don't have any more stateful widgets we only have stayed less widgets and we can rely on the consumer widgets to create our widget tree where we need it this reduces the boilerplate and it reduces performance like legs because of course we only rebuild the widget trees that are necessary to rebuild but there is also some critics in this package one of them and most heared of is that the logic and the widget tree is getting combined together so that means you will find to state right away in the widget tree not everyone likes that and there is a good reason for that because it coupled the eye UI and the backend a little bit closer together additionally you could come into some boilerplate problems when you start to work with multiple provider so that means if you have multiple provider that you want to access at the same time you need a consumer that is wrapped in a consumer that is most likely wrapped in a consumer so in the worst case if you want to have three different providers that you want to get data from you will have to create three different consumers for that I hope you like that episode today and that you take this as a starting point for your provider journey with state management we will use this as an entry point for River pot because River pot is very close related to a provider but make some twerks differently so you are better prepared to what's coming next we want to know your provider story so what have you built with provider or is it even your first time did you like to introduce inside of their state repository please leave it down in the comments below and if you haven't yet this is the right moment to subscribe this channel hit the like button maybe also this little bill and now thanks for watching until the next time

Channel: Flutter Explained

Views: 14,773

Keywords: flutter, state management, flutter state management, flutter tutorial, flutter redux, flutter state, flutter provider, provider, flutter todo application, flutter state management redux, flutter state manegment, flutter redux tutorial, flutter ui, flutter sdk, provider flutter, flutter widgets, flutter ui design, flutter todo app, flutter development, learn flutter, flutter io, flutter tutorials, flutter app, flutter with redux, flutter bloc, flutter provider tutorial

Id: hwv31bNdSt4

Length: 18min 28sec (1108 seconds)

Published: Fri Jul 17 2020