Theme Switch using Provider | Flutter State Management

hello there in this video we are going to build a app similar to this one where we will click on the toggle theme button and it is going to toggle the theme using provider so here I am going to start from this point so here I have very less code you can see I have a main function after that uh my app which is having material app with light theme and homemade home page so in the home page you can see that we have a title bar in the body we have a button okay so how the theme works so in the theme if we say theme data dot dark or light So based on the value it picks the theme so we cannot do this while running the app so we need to do the same thing using button press we will do this using provider so for that we will visit this URL and copy the provider package name let's open the pub spec dot EML file and add the provider okay once we add the provider okay so here you see that we have added the provider moving forward so first of all I will create a folder called provider and I will create a file uh theme provider dot dot okay let's create a class called theme provider which will extend change Notifier and this class will contain a private variable which will store theme data theme data and the default value is going to be dark so let's assume that the default value is dark if we want to use light we can use it but for now we will go with dark so as you can see this is a private variable so no one can access this outside of the class but I want to access it so for that I will make a getter okay so now we can access it but change the value of this theme how we can do this from outside of the class so for that we are going to create a method called toggle theme and that will do that for us so this is how we can check if the theme is dark on or not if the theme equals to theme dark which means this is Dark theme so in the case of Dark theme we will make it light so let's make it light okay so if it is not a dark theme which means we need to make it dark so once we update the value we will call change Notifier after the else if else part that's it so now we have theme provider here which is ready to be used so now we can close this and we can come to our main so here we have to wrap our material app with change Notifier provider so that that provider will be available in home page okay so now it's done so we need to import it and that's it so now we have change provider so here everything is good but the value should not be hard coded it should come from the uh it should come from the team provider so the chain Notifier except child and Builder and create is required parameter so create is there and the child is also there so theme provider cannot be accessed here like in this context the reason is theme provider has been defined in this context so theme provider should always be accessed after this context okay or after the uh defining the after we Define the theme provider uh I mean to say change Notifier provider so this is how we access the provider but if I write this code this is going to give us a error so let's see the error let's restart we got the error it says could not find the correct provider theme provider Above This widget you get the part so it is not available above this thing why because we have like declare it on same level so for this what we should do we should not try to access the theme provider there instead we should try to access it below so for that what we can do we can simply use the Builder instead of child and we can take that Provider from there and put it inside the Builder so now you see that this context is coming from Builder and the above context was being used to initialize the theme provider or change notified provider you can say so at this place we use builder in the previous video or I have another very simple video of Provider I I mean to say using provider I made a counter application there I did not use Builder so this is the place where we use the Builder so I made two separate video to explain the huge case of Builder so that's it so I hope that you got the idea how this is happening so at this place we have provider we like Define the provider and we call the toggle theme so let's make the default as light theme now and if we try to toggle it's working so that's it so I hope you got the idea how this one is working and all the magic which you are seeing at this point is because of notify listener if you do not write the notify listener part it will not do anything okay so make sure you use the notify and listener so

Channel: Nitish Kumar Singh

Views: 1,694

Keywords: Nitish, Kumar, Singh, flutter, flutter provider, flutter theme switch, theme change, provider theme, change theme flutter

Id: TVSn85DxWmw

Length: 6min 15sec (375 seconds)

Published: Fri Aug 19 2022