Flutter - Dynamic Persistent Theme Switcher using Provider and Shared Preferences

namaste and welcome to the act bits today we will learn to create dark and light themes feature in our floater application using provider and we will purchase the chosen theme using set preferences so that when the user opens the app further next time the theme that they chose would be permanent let us get started here I have created a simple demo project that has switch lists and that allows us to switch between dark and light mode which is not working at the moment and there is a card and there is a botton and floating action button just to demonstrate how it looks on dark and light theme so right now I am using the dark theme here wherein Tim dot dot I have created two themes light and dark just supplied primary Schwartz accent color and a scaffold background colorful light theme with brightness light and in dark theme the brightness is dark and I have supplied primary an accent color so let me just change this to light theme from dying so if we change this it hot reloads and we can see how it looks in the light thing so our job is to make this switch work so that when user turns on the dark mode the dark mode theme is applied that theme is applied and when they turn off the dark mode light theme is applied along with that whenever user changes this theme the chosen theme should be persistent using set preferences so let us get started in thing dot dot I would like to create a change modifier that will allow us to change this darken liked him so first till modifier it should extend chains notify let us instantiate few of the things few variables first the key to save in the SAP preference team let's make a team then set preferences perhaps and we have already created theme data let us create another variable that says whether the light or dark team misses for that we'll just use a bull darting if Noctem is true then we use talked in other vice lighting let's make it internal and let's instance it let's make a constructor for T modifier where we'll set them true next let's make a function that will toggle the thin vocal team what this will do is once per dot thing will equal do not understand so if it's true it will make it false if it's false it will make it too next let us notify listeners now in here what we would like to do is let us provide our hence notifier using provider so let me wrap this with new visa since 95 provider and is create function if you are using provider version below 3.2 then you will have to use builder instead of create I am using the latest version so yeah in OT file we will need the consumer right here because theme is applied up here so will net consumer here also text notifier child that is visit here this should return instead of science here this and what we'll do is if 35 dot this modifiers should be type modifier so if notifier dot okay we need a gator for our notifier dart team if ot fire dot doc team is true then use dart otherwise light so our dart team is true currently down here again we will wrap this switch list style with a consumer up with wizard consumer let's make this builder so contacts notifier child and this is just written this speech style values should be notifier dot this modifiers consumers use theme modifier so down here notified our dancing if that time is true then TAC team is turned on I mean unchanged notifier toggle team okay so let's try this okay so now our dot and light theme Sobel is working so using this switch we can switch to either dark mode or light mode however if we hot restart this app if we switch to light and hot restart this app this will again go back to that mode this is because we have said that mode to true in our theme notifier however what we would like to do is we'd like to persist whichever theme is chosen by the user in the third preference so that next time when they open the app their chosen theme is persistent or loaded so let us do that first we will create two functions one to load this person theme from that preference and next one to save to set reference so let us create a load function note from preps here first we would like to make this a sink and we would like to initiate our preference so oh wait initiate preference so let us make that function in it proofs let's make this a sink and in the unit briefs if trips because null if preference is now only then we would like to do graphs equals a weight self preference start get instance because if it's already initiated we don't want to do anything next we have the unit preference then shear would like to get on the score dot theme equals prefs dot gap pull our key is created at the top if it is null then by default let's make it true so by default dark thing will be applied otherwise whatever is in the graphs so we would like to notify listeners next we'd like to create a save to proofs so whenever theme changes we'd like to save it to self reference it's easy again the thing of it in a press it's not initiated then set Bull II and value will be scored our team let's make this proofs also internal grabber try back okay so we have save and load functions what we'd like to do is whenever we instantiate them notifier we would like to load from prefs and whenever we toggle theme we'd like to save to drafts so that it is persistent so let me hot restart now okay we get a missing plugin exception because after I added set references I had not rebuilt let me rebuild the project okay the app has built and it's running so now by default we are in dark mode let me switch to light mode and now let me hot restart so it should persist this thing okay so even after hot restart we are getting the same thing this is because we have saved it to set preference and loaded it from set preference so no matter how many times you HOT restart or if you even exit the app and reopen it it will work so let's try dot let hot restart again see it's working if so this is how easily you can create dark and light things which you during runtime using provider and set reference thank you everyone for watching this tutorial so your support by like and share subscribe thank you

Channel: Appwriters

Views: 9,686

Keywords: flutter

Id: 1t5SbwHscMs

Length: 11min 34sec (694 seconds)

Published: Fri Dec 13 2019