 Hello guys, so in this video we are going to start with the provider, but before starting with the provider I will show you how we manage the ephemeral state with the help of set state So here I will show you how the whole screen will be rebuild again and again even for a single change on UICite then we will shift to provider and there we will see how to manage the global state and Then I will show you how it is rendering only required Widget on the screen instead of re-building the whole screen So let's get started with a simple app go to just home page and I just remove this text and I will add one column here and add children and In this we will be using one circle avatar where I will be displaying one image and Then I will be using the text to show Let's say the likes. Okay. Let's create a dollar likes variable and We can just Define it on the top. We do it here. So I will say pink likes Equal to zero so initially I keep it zero and this likes I would be displaying over here So since it is const we cannot use variable. Let's remove this and let's use comma here Let's add a couple of properties here. Let's say radius 122 and just Let's use background image and that would be we can take some network image and I just use it from the browser Just open this and just copy this Go back here go down and what we left it So let's save this first of all and You can see the image is coming So if you want you can just decorate it a little bit and what I want I just change the background color to white We just need to add course here because this is static image and then we can simply say Likes that's fine. And if you want you can just decorate it like this likes and You can even add the style here if you want. So let's go here and just use some space of 10 and just go here and add const and now we need one Button here. So let's use early weighted button With icon so on press we will define it later on and I can we can use icon here and that would be icons start Thumbs up So let's simply use const text which will please say like And I just add a course here as well Save this and see how it looks Okay, now if you want you can just change the color of This button as well Let's use the style here and we can use elevated button thought Styles from and I can simply say background color. Let's say colors dot blue Let's save it So let's use some style here for this text and increase this More size so that we can see it better and you can also make it bold and just add const here and And here save this That's better. Now what we can do. Let's just align it to the center and And That's fine. So what else we need now when I click on this like button, it should increment the count one thing So let's increment the count. So that is likes plus plus and simply set state Just done Or you can even wrap this likes plus plus here if you want So that's your choice. So let's try to click this and you can see the likes Are being increment. So I just need a little space between this image And fine Okay. Now what I want, let's add one more button here. So this time I just add a simple button So go here and Just use elevated button and on press. I just navigate To some next page. We'll do it here and here we can simply use a const text simply say next page Save this Okay, so what I want when I click on next page, I should be able to see the likes on that page So let's quickly create one more screen here with the name Next underscore page dot So let's say So we can just say stateless widget is next page and here instead of returning the container simply say scaffold and app bar So here we can simply use the title Const text This is let's say next page And You can send to this as well and let's go to the body part and here I need a center and Discharge we can simply display likes here so simply a text and Use likes and variable dollar likes So what this likes is this like should come from the constructor. So let's create a final likes and simply say here comma required field that is this dot likes and We can remove this extra imports. I think that's done. So go back to home page and add the logic on this page so navigator Dot you can simply use this push So Let's say send me colon here and simply use material page route and In builder we can simply say context and you can simply say Next page and here you need to pass the likes. So we have one extra record if you want you can remove it Okay, so save this that's all So let's try to click on this next page and you can see the likes are 18 So let me quickly just copy this style from here So that we can see the bigger one in size So just go here Add to comma and style and that's all so that's fine So here if I increment the like to 22 and go to next page, you can see 22 now the main purpose to show it here is just go back here and So I just go to this build and we will cross-check that this method is called again and again or not So let's check for K debug mode So if it is in debug mode, then you can simply what you can simply print Build you can say execute save this and Just clear this So go here and try to click like and you can see the whole screen is filled again and again That's why this method is called This line is printed. So this method is called this line is printed Okay, so this is how we manage with a formal state. Let's quickly jump to the provider So for that, we just go to this pub dev and Add the dependency of provider. So let's copy this go back here in Pubspec and go here under dependencies So we can just add it here and just save it so that it can Fetch the dependency So once it is done what you need to do the first step is you need to go to mean and You need to wrap your material app with provider So I just cut this and simply say change notify provider So here under create we need to just call this arrow function and here You need to provide the provider. So we don't have any provider yet. So let's quickly create a provider first So we just create a folder pro why does and I will just say Let's say home home underscore provider dot da So to create a provider you need to create a class home Provider whatever name you want and you need to extend from change Notify so this gonna notify for the changes So what we need we need to separate our logic from UI to here So we need to hold global state of likes variable. Let's take a likes to zero initially So what we want so we want a getter first of all, let's create a int Get and how do you get likes simply likes and whenever this getter is scored. We have to return this likes variable Okay, and the second let's provide an increment behavior wide increment Or you can say increment like and here what we need to do simply underscore likes plus plus and Once you have done something you have done some changes you must have to call one function that is Notify listeners. So this is gonna notify to the listeners that value has been changed So I just saved this this task is completed Now we just go back to mean and provide there you need to provide your provider. So that is home Provider, okay. So once you have provided this provider, what next you need to do we move this bracket and We just remove this extra bracket and go here and Here we need to use child and here you can paste your material Okay, so just you need to wrap your material up with Change notifier provider and use the create property where you need to use this Function with the context and just provide your provide so that's all you have to do here and Let's move to the home Screen Now here what we need we need a provider here So let's go here and simply create a provider here provider variable and to create the provider we have to use pro wider dot off method and here it will take context and Semicolon so this need context. So we don't have context here directly So what should you do? Just take it out from here and go inside your build So here we can use before scaffold Define this over here Okay, so here you will be getting context. That's fine. So now what you need to do you have your provider instance here Now this provider going to provide the value whatever is given by the provider Now whenever you want to get the value change So what you need you need to use the consumer visit. So let's use here. So let's use a consumer here and Simply you can go for Consumer and you can see this consumer going to give you a build you So this builder is basically Is a function so which will be taking context value and child So one more thing you can just specify here what kind of provider You are using so home provider Okay, that's fine now Let's Cut this text from here and What we need here? We need to use that text Okay, second thing is this value variable from this function going to give you the value So instead of using this likes variable here. We can use this here value dot Likes, okay, so from value you can get the likes. So this is just a getter that we defined over here in this Okay, so if this is something else instead of using likes you have to write something else Okay, so this is done now We don't need this likes variable anymore because we have already defined it under this provider Okay, so now this time we don't have any business logic in this UI site All over business logic is over here in this provider Okay, so this will separate your business logic from UI and here instead of doing this set state Delete and Simply use provider dot Increment so we are not getting this Why we are not getting it. So I just use this provider here. Yep, let's type it manually and see Yep That's fine. So let's go and check we are getting some error here. So here we are passing this likes So we don't need to pass anything here. So simply just go here and Just delete this and Simply you can write the cost here and simply go to this next page and you can remove this and you can remove this as well and We just add the logic here later on. Let me just delete this and Add the cost for the time being so we just go back here And we first of all want to check the logic goes well. So what we need to do is we just restart the app and Check So we got errors here. Let's stop it and I just provide here home provider and Done. So let me cross check if I'm not missing anything. So we just added this provider and We have already wrapped our main. So since we have wrapped it. We need to restart it So let's go back and check We are facing any error here. Let me go here and check Increment like it's not like It's like you can see now it is coming. So I forward to Specify the type here in the provider. That's why it was not detecting this Okay, so now it should work. Let's run it again So Now it is working So do what let's try to just increment this and you can see it is showing build executed I just clear this so this time again. This whole tree is Rebuilt again Okay, so let's increment it and you can see build is executed So what you need to do one thing we are missing over here You need to add here one more property that is Listen, so listen, you have to define false Otherwise, it will keep on listening and it will keep on building the whole screen again and again Okay, so this is false Whenever I just click on like button then it will do what it will go to this provider and increment this and Notify the consumers that something has been happened something has been changed. So go back here and That way the consumer is here Which will just update this widget only let's save this again and just clear it and let's try to increment this and this time I just restart quickly so I just go here and increment the like You can see you're not able to see any build again You can just rebuild only particular widget that you want Okay, so this is one way how you can rebuild a particular widget on the screen and Let's move to the second part that how to manage the global state Now here. I want to use that. So what we can do we can simply go to this and Copy this line of Provider go here under the spread Simply use this provider over here and just import and What do you need to do instead of using this likes? We can use dollar Provider dot likes Okay, and let's remove this const here and save this So let's go here on the next page and you can see you're getting 31 likes go back here. I just increment You can see where method is not quite and if I move to next page, I'm able to see this 36 So this is how we manage the global state as well And we have done three things over here. We have managed the global state We have seen how to use the provider how to separate the business logic from UI side and we have also seen how to Rebuild a particular component on the screen a particular widget on the screen instead of rebuilding the whole screen So that's all for this video. If you have any doubt do comment in the comment section. Otherwise like and subscribe. Thank you