Persistent Theme Change in Flutter | Shared Preference | Provider

hello friends in this video we will build a theme change application and also show the current theme data in the app memory so that after app restart we can have that same thing for that first of all we will use provider one of the package which can help us in changing the theme okay so for that i will go to publishpeg.ml and add this dependency which is provider let's save yeah and it will run flutter update moving forward now i will create one file [Music] which will be theme settings so i will create a folder and inside that the file will be there which is theme settings so here i will create one class called theme setting which will extend change notifier we will talk about change notifier in a while before that let's see what we are going to have inside this class inside this class we will have current theme like what is the current theme so by default we will have a theme as light theme okay so as you can see this variable is private which means no one can access or modify this from outside of the class so how anyone will access the current theme so for that we will make a getter so how can we make the getter just copy and paste the same line and just add getter word before that and just return the private variable that's it so now we have made a getter so this is how anyone can get this value but to update the value we need to do something so to update the value we will make a method and that method is going to update the value and the method is basically going to toggle the theme or toggle the value which means if it is light make it dark if it's dark make it light so i'm just checking if the current theme is light in that case what we will do we will make it light like dark okay and if it's not light make it light because if it's not light it must be dark okay so this is the private variable and after that we have a getter using that we can get the value this one and just after that we have a method which is toggle theme which will toggle the theme okay i miss one thing which is not file listener so basically notify listener is something which will tell the app that something has been changed and it will apply that change so i will come here and i will wrap the material up with stream builder and i will delete the system builder part and i will say change notifier provider so now whenever there will be any like change happen and notify will be called it will just rebuild the app or it will just hot reload okay so you see that the theme is dark by default but now what i wanted to do instead of having this dark theme what we will do we will come here and we will say final and we will get the settings so how can we get the settings we will say context dot read and what we wanted to read is theme settings so now we have the settings and in the theme part we will say settings dot current theme so now we got the current theme and you can see the current theme is light because you remember the default value is light there is one more way to like read the theme settings like not by not using context dot read and this is also popular so this my context dot read might be new for you so let's see the other way which is provider of okay so you can do using this way also both are fine moving forward we have this increment application where we we click on the plus button it increment the number so instead of clicking on that button and incrementing the number what we will do now we will update the theme so let's import the required thing so we imported provider and the theme setting awesome so now in the setting i will call toggle theme so now whenever we will press the button and it will call the method before that let's clear the body and let's update the name of the method from increment to the toggle theme and add it here let's remove the count things look good now so now if i like save it and refresh so if i will now press on the plus button basically what should happen it should change the theme let's see but it complains okay let's see what it complains it says try to listen of value exposed with provider from outside of the vegetarian okay so we are listening this outside of the widget tree how can we solve it the question is that so if we scroll down it say to fix the problem just add less and false okay i will talk about this in a moment so let's refresh let's refresh again okay so now looks like the problem has been solved yeah what was the problem the problem is uh you see this build so this is build is basically the vegetarian and the methods are like outside of the tree so when you are like reading the provider you can read them inside the build it's fine outside is not valid so you have to say listen false so you see if i restart that it's like light theme if i make it dark and restart it's again light same so this is the problem which we will be solving okay so for that we will use their preference and it will store the last like theme state or last theme setting so for that what we will do we will add the package called shared preference here and once we add the package after that we will stop the application and run it again okay now it's it's good like it's running so moving forward now we need to like make some changes so when we are changing the theme we need to like store that value in the memory somewhere in the memory so that when the app will start we can ask what was the theme which we set last time before closing the app okay so here we will come in the toggle theme and we will make an instance of shared preference so shared [Music] preference yeah dot get instance so we'll get the instance and you see we are getting the error and it is very simple we are getting a future of shared preference so let's add a weight and a sink awesome i think the problem has been solved now okay so now in the set preference we will store it so when we are changing the theme to the dark which means the current theme is dark so we will say set bull and inside the billboard we will have a key which will be is dark is dark is a variable which will become true whenever the theme is dark and whenever the theme is not dark the is dark will become false so we get the third preference and we are like after that when the theme is dark we are making is dark as true if the theme is light we are making is dark as fall so this is how it's working so if i now click on the plus button the theme gets changed to the dark and meanwhile also the value get stored in the shared preference okay now if we make it dark and restart the the theme is not dark anymore but now we are at least using the plugin why it is happening because still the current theme the default value is light theme so now instead of having light theme always we need to get the value from say at preference the default value so let's import the shared preference here so as soon as we get the shared preference we will ask get bull and in the get bull we need to tell the key where we have stored the value so the key is is dark so here we will get the value so i will have a variable called is dark and that's it so now we are having that value so once we get the value here like before running that now i will pass this value to the provider so it's dark let's pass it to the my app in the my app we will like create this variable and get this using constructor is dark and let's make it required awesome and as you can see it's a named parameter so we need to say is dark is dark the key and the value now it's complaining it is bull dark okay so you can see when you say get bull it returns a boolean value or null so we don't want null so for that we have to give a default value so the default value is false now so by default the each dot is false so as we got the is dark setting now so we will pass that to the theme settings in the constructor and in the constructor we will receive that is dot and once we receive it what we will do we will update the value of current theme so here you can see we are checking the current theme light we are making it to the dark else we are making it to the light but here what we have to do we have to do something similar if the is dark is true then we will make the image dark because the the shade preference is saying in the memory the theme is dark so let's make it dark because memory says dark if it doesn't say da let's make it light if i refresh the app it is complaining binding has not been initialized again that's another issue so let's fix it so typically this is done by calling this one so if you call it it will be fixed okay so let's come to the main app and let's write it and let's refresh and if you have watched my like other video of said predictions i have talked about this thing and things look good now so if i make it light and refresh the theme is light and if i like refresh it slide let's make it dark and refresh and the theme is still dark so now we are assisting the value if we close and restart that then also the theme will start so i hope you got the knowledge and thank you see you in next video if you have any question or query let me know

Channel: Nitish Kumar Singh

Views: 2,843

Keywords: Nitish, Kumar, Singh, fllutter, flutter shared preferences, Persistent Theme

Id: hIzM7w2cF8c

Length: 10min 55sec (655 seconds)

Published: Sat Sep 10 2022