Flutter Provider - State Management using PROVIDER ( A BLoC Alternative)

hey hello friends welcome to this new Florida tutorial and in this we will be learning about the provider estate management pattern in a flutter so for understanding the problem for which the provider is a solution we first have to understand what the situation is so for that I'll just open up Photoshop for I'll just have to use Photoshop for now because I don't have any other means to just demonstrate the purpose so I have a widget tree here for example you have a state you are you are me this is the widget tree of your home screen and you're maintaining the state here okay so the main place where you can access your straight is this but the way you structure your widget tree is that all these widgets let's say this this and this widget requires the state to be accessed okay they were they require and access to the state that is being maintained here because they change their behavior according to the state that is in the widget tree okay so if you want these widgets to access the state you'll have to conventionally you'll have to pass the state down the tree to these widgets okay so sorry it should have gone there so this is not a good approach okay this is completely possible but it's not really a good approach because in this case you'll just have to pass the state down to the widgets which don't really need them like this column this column and this column they don't really need the state so you're passing the state to the widgets that don't really need them to reach the place that they actually need okay so this is not an efficient code in any way possible so to tackle this problem there is also a block pattern but I'm not going to discuss that here in this tutorial there is a new there is the provider approach okay so what basically a provider does in this case is let me delete this layer and what basically a provider does is let's say this is the provider okay it it's it's it's like a black box let's say so it keeps all the track of the data let's say at this point it takes a temperature variable sorry for the demonstration it's it's really bad but ok I hope you understand the point let's say it keeps in account the temperature value ok let's say we have a button here let's say this is a button and this basically when we click this button it changes the temperature okay and this is basically a provider so there are listeners in the provider ok so the whole provider concept is based on listeners ok so basically let this button be a consumer of this data and let's make this column also a consumer of this data and this this column also a consumer of this data ok so all the data has been kept here and when we click the button it updates the data in the provider itself so as the data is updated it then it then instantaneously sends updates the data in the all the widgets that are listening to the data here and in turn they these widgets update their hierarchy based on the data that is listened ok so basically it's all based on listeners if you have used for our base then you know if you change the node once and all the underlying notes are also updated and all the updated data is sent to the client side so I'm just throwing it out there so let's say ok so these three widgets are listening to the data in the provider and when this button updates the data in the provider both the other widgets who are listening to the data get also get updated ok so this is basically in a nutshell what the provider pattern is all about so there are much more to learn in this provider but I'm just gonna gonna start you with the basics ok so let's get down to the tutorial itself here I have I have a main dark dart file and a pub spec UML open and weather info so as I talked to you a regarding this temperature here I'm going to same example so we have a main dart file in which we have a simple material app and we have imported the material widget so this my app that is being instantiated here in the run app method is just a stateless widget that is a material app and we have a home page that is also stateless so we have a scaffold and app bar and all the basic contents but here you can see that I have I have a column in the center of the body of the scaffold so basically there is a column that has two buttons that is my special heading and my special content okay so basically this heading will be will tell us the temperature type and this special content will tell us the temperature value okay so let's let's let's get this app running on the emulator you'll get a better idea there so okay so we have the app running on the emulator so it's just just a placeholder data here so basically this will be the the widget tree of our application we have a temperature type and a temperature value and whenever we click on this floating action button the temperature type will change it will change from Celsius to the Fahrenheit and the temperature value will remain the same we won't update this in any way so basically we'll mint we have these two separate widgets my special heading and my special content I'm just representing these as a special widgets okay so you can have a special type of text that you have created for your application so you will have that as a separate widget for yourself to use that in different places of your application and hence you won't be able to really update the state of the application update the state of the application from this widget itself because it's it's a widget of its own kind in itself so that is really a difficult thing to achieve so we have a special content a special heading and a special floating action button which are being displayed on the screen so as all these three widgets are a completely stateless widgets in their own in their self so if we want to when we click on the button we want to type to change so using the conventional methods this is not really possible because if I have this floating button this is a stateless widget even if it is a stateful widget even then we have to transport this state out of this and we have to access that in the home page and then throw that down to the other two text views here so that is kind of a tedious process as I explained to you in the Photoshop tutorial prior to this so how can we achieve this approach for other thing we have this weather info that is just a simple class this has a string of a string that carries the type of the temperature and the temperature value for this tutorial we'll keep this as at 25 actually we don't really need this here I just had this class made it so we're going with this we have a getter and setter for each type of values so let's close this for a while and go to the main door file so what we want to achieve is when we click on the floating action button we want the color of the floating action button to change and we want this special heading to change accordingly okay so how to achieve that so basically we want to implement a provider pattern here so for that so for achieving this the first thing we need to do is we want to go to the pub spec dot the ML file and we want to import this package provider okay not provide the provider PR OB IE d ER VI ter so provider package we want that to import and you click on package upgrade and then you need to basically import this here imports provider door okay so if you have separate widgets in separate files I do have all these three widgets here in the screen because there are relevant and they're relevant to this screen only so I'm just importing the package here or else you'll have to import them in the separate files so what we need to do now is we want to go to the weather info and we want to make it implement change notifier we want to add a mixin of change notifier and when you when you alt enter on the change notifier in the android studio you'll get four options to import the package we want to import the foundation.org package because we want to use change notifier that is in the foundation package so basically what this would keyword means in the dart language is that where we want to implement the features we want to implement the functionality of this change notify our class without actually extending the class so it basically works as multiple inheritance but without all the quirks of that so basically we're using the functionality have changed notifier in the weather info without actually using the change notifier so what why do we need this change notify here as you already know in the tutorial I told you that everything in this provider is based on listeners so all these three widgets that want the data in the provider they want to listen to the data even the button itself so what we will do here is in the set state whenever the temp new temperature is set through the button we want to use the function called notify listeners and this is being provided by the change notifier okay so for proving that let's say if I get rid of this you can see there is an error here we want to use change notifier to actually use this implementation of change of notify listeners so this is the and this is everything you need to do in the data class the weather info okay okay so let's close this for a while so the first thing that we need to do now is we want to access we want to instantiate this data here because this weather info when the application first starts we want to instantiate these two values and the whole complete weather info with it so the best place for that would be at the top level of the application we can also do that here in the column or the center but we should basically do that in the top level because if we want to access let's say in the app bar or any other place so we can access that so for that what we need to do is we want to wrap the scaffold with a new widget a wrap with a new widget and that is the change notifier provider and this changed notifier provider is the extent is present in this provider dark package that we previously imported so yeah that is it and this provider also takes a builds property this has a child property that takes the scaffold or any other widget but it also has a builder property basically what it needs to do is it wants to build the object okay it wants to instance and instantiate the weather info so what it will do is it will take in the context like every builder do and it will return a new weather info so I'll have to import the weather info up here let's say yeah import weather info and I imported the weather info here so yeah so basically what this is doing is we're wrapping the whole scaffold and all the containing widgets with a change notifier provider and this is necessary because we want to access the state here in the two special widgets and the floating action button so we want to have their parent contain all the chains notify pro contain the weather info so as soon as this scaffold is created the change notified provider is created we have we have an early instant of weather info so okay so at this point the weather info will have the temperature type of Celsius and the temperature value of 25 so what now what we need to do now is we want to go to the floating action button because the floating action button is basically a widget that we want when the user clicks on that widget it changes the type of the temperature so it changes the temperature from Celsius to Fahrenheit okay so we'll go to the builds method and we'll create a final variable and we'll just name it weather info and so we don't really need to make it final we can just make it war okay so we have this weather info and we're gonna use this provider class dot off context and this is it okay so I and also we need to pass in the type here and this is our weather info type okay so basically what the statement does is and we want to declare this in the builder method because we even want to use the context okay so what what we were doing here in the change dirty fire provider is that we're taking the context and in this context we're setting the initial values of weather info were instantiating the weather info for this context and when we want to listen to this weather info we want to do that in the same context okay so we're taking the provider and we're instantiating it with the same context so that we can listen the values that are being changed here okay so we're taking in the provider and we're passing in the context and we're let's say we have at this point we only have weather info but let's say we have a few more classes or a few more objects to look after so in that case this is really necessary so that the provider knows what type of data we're looking for so for this floating action button we're looking for the data type of weather info okay so we have to declare that explicitly here so we have this weather info here so what we want to do is when the user clicks on the button in the on Preston method what we want to do is we want to change the type if the type is Celsius we want to change that to foreign height and if it's foreign height then we want to change it back to Celsius so for that way also have to access the estate for for a while so let's say we have a string value we call it new weather type and what do we take care we take in weather info dot temperature type and if the temperature type is Celsius then what we do is we'll return FA our that I'm just calling its burn height I don't really know the spelling but or else we'll just return Celsius so okay so what we're doing here is we're checking if the weather info that temperature type is Celsius then we'll return far or else we'll return Celsius okay so what we want to do now is we want to update this weather info dot temperature type is equal to new weather type so we're set using the cetera variable here and as you remember when we set the variable it goes to the weather info class and it notifies the listeners okay and we also need to do that here notify listeners ok so as soon as the value is updated while the floating action button the notify listener is being called whenever the set method is being called so ok so I think this part is OK now one thing more that we need to do is based on the weather type we also need to change the background color of the floating action button so let's say we create a new method outside the built in the floating action button class we call this it returns a type of color and we want to call this decide color and it takes in the weather weather info we'll just call this info and basically I'm just gonna copy this statement and turner it yep so I'm just gonna replace that with info and if the temperate is Celsius then we're going to return colors dot colors the green or else I'm gonna return colors dots red they clear talking orange yeah satisfying and we want to change this to basically we don't really need this here I'll just return that okay so yeah this is the basic decide color and we want to replace the color of the background color to decide color and we're gonna pass weather info fear so basically when we click on this button floating action button now it will update the data in the weather and and the data will be obviously be updated here and it will all the listeners the widgets which are listening to the data will update accordingly so at this point this floating action button is also listening to the data so as soon as the data is updated the weather info will call the notify listeners and whichever widget is listening to the data will update itself according to the data I think this is final well I'll just run the application oh so you can see that we have an initial color our green because the initial data is Celsius so as soon as I click on this you can change that the color of the floating action button changes so whenever I click on this the data is updated and the floating action button is listening to the data and that in turn updates the UI ok so we want to implement the same thing in the other two widgets ok we want to change the data in this by my special heading and in my special content where it will remain the same for now okay so we want to focus on the my special heading so as we use this method provider off context we can completely use this method here also let's just copy that provider off context and code in my special heading and in the build method I'll just just paste this statement here we're just talking to the brother info and in the text what I will do I'm just gonna pass weather info to temperature type so yeah and yeah this is fine for now I'll just and also what I will do is I'll just pass in some styling and I'll just add Texas style and for the textile I'll just add color or maybe the colors dots deep orange yeah I'll just keep that deep orange oh so what I will do is to be more specific I'll just take this method here I could have just declared that about outside but yeah just work now I'll just paste this here and I'm just gonna go here and pass and decide color and we'll pass any weather info so this will work fine I'll just and we also what I'll also do is I'll just font size I'll just keep that to be 25 or now because it's a heading so I'll just run this now okay you can see that is it's listening to the data in the weather info and you can see both their color is green and I want to click on this yeah you see that it changes it well you all the widgets which are listening to the data in the provider update to update their UI as the data changes and vice versa so this is basically the way in which the provider pattern is implemented in it's very basics so there is one other way if we don't want to use this provider off because it uses the context what we can do now is let's say we get rid of this let's say we get rid of this there is one more way to implement this here what we want to do is we want to wrap this text around with a new widget which is the consumer consumer okay so what the consumer does is it takes a builds builder method and the Builder then okay it's a builder then takes three things one is the context other is the big it gives us the data so what which is being taken by the provider so it gives us the data let's say this weather info as we already call it and there is the third argument I don't really need to pass that here and this will return us the text widget so I think there is some problem I think this will be of braces the type arguments build context dynamic text can be assigned okay so it also takes in the third argument I guess yeah so we have to pass in null for that third argument it's not optional okay so what this consumer is doing is it the consumer listens to the data in the provider and it then listens to the data and builds the data according to the information that is in the provider so the first argument is the context it takes in the context and it provides you with the context and it takes the weather info that is in the provider the updated weather info and the targa a third argument is null for now so with this this info it creates a widget of text or any other widget that we want to use so we can use this weather info the updated weather info here and create the text accordingly so if I run this now ok so now when we run the application there is an error that provider dynamic about the consumer dynamic widget so it's the same thing that happens over here in the provider we want to explicitly pass the type of data that we want to listen so because the consumer will be listening to all the updates we want to pass in the data type here we want to passing the weather info so when we run this I am you can see that the well.you is correctly updated and when we click on the floating action button the data changes so this is basically the other way if you want if you want an alternative for this provider this consumer pattern is wait so I hope you understand the providers if you you need to watch this tutorial two to three times to basically understand the concept it's really simple you just have a provider that contains all the data and and the whole concept is built around listeners so whenever the value is changed the notify listener has been called and every visit that is listening to the data updates itself accordingly so this is basically the concept of providers it's much simpler than the builds then the block pattern and it's really useful there are some quirks to it but once you get to use it it's really good I heard the talk on the Google i/o yesterday and it was really intriguing it's really a good way to just maintain the state of the application so I hope you learn a lot a lot in this tutorial if you have any questions you can pop that in the comment section and I'll make sure to reply them reply to them all and thank you for watching and do subscribe to my channel if you liked the tutorial and it helps a lot and do press the like button and it see you next time

Channel: RetroPortal Studio

Views: 59,301

Keywords: flutter, Flutter Provider, flutter state management, flutter provider tutorial, flutter provider architecture, flutter tutorial, Flutter, State Management Flutter, Android Tutorial, Provider, Flutter Provider Tutorial, Manage Data to Flutter, Flutter State Management, Data Management Flutter, Advanced Flutter Tutorial, Flutter for Beginners, Flutter Language Tutorial, Flutter Examples, provider flutter, provider flutter tutorial

Id: xcSG-qddbCM

Length: 25min 24sec (1524 seconds)

Published: Fri May 10 2019