#Google's Flutter Tutorial - Theme your App using BLoC and Shared Preferences.

hello and welcome back to another flutter tutorial in this video we will see how to theme your app in flutter save the theme and reload using block and shared preferences in the previous video i had given a basic introduction about how to start with block patterns for state management with a real world example i'll be providing the link to the source code and link to the video in the description now let's see how we can theme your app easily i'm gonna continue with where we left off in the previous video and give a quick walkthrough of it so let's start this was the demo application that we created in the previous video so let's go to the project structure inside the api we have the exceptions and the services so in the services we are fetching a list of albums from jsonplaceholder.typical.com albums this is our model class for the album list and we have a y which lists the albums and this is a service that i already mentioned we are getting the albums and we are parsing using the model class so we have these many list of exceptions so no internet exception no service found invalid format and unknown exception now let's go to the block folder where we have the event state and the block file so these are the events we have only one even here which is the fetch album which is triggered by the user and we have these many set of states which is a initial state loading state and a list error state which extends equatable so equatable helps to compare two objects so basically what block does is it will accept a event and state and it will return a new state which can be used to update the ui these are the plugins that we use in this demo which is a plotter block equatable http and the shared preferences now let's go to the blog file so this is from the previous video where we had the albums block which extends a block and it will have the event and state and when we trigger event it's going to return a new state so here it will return a album's loading state first and it will not terminate there it will continue to get the albums and if it is a success it's going to return the album's loaded state otherwise it will return a error state all right so that's the basic thing about blocks these are the widgets that we are using inside the app now if we go to the main screen which is the album screen we have a title albums and a body which will be wrapped inside a block builder of type albums block and it will return the new state if it is success we'll show the list of albums otherwise we'll be showing some error or if it is a loading state we will be showing a loading widget okay so that's the list row which will display the list of albums now here comes the main part where we need to wrap the class which needs to listen to the block changes with the block provider so here we need to run the album screen with the block provider and we need to return the albums block with the albums rapport parameter that will fetch the list of albums which is going to trigger the albums block and when the state changes it's going to trigger the block builder in the album screen so let's see how we fire the event so load albums so this is how we fired the fetch albums event and when the state is returned it's going to fire the block builder widget here and that will show the appropriate list so that's all about what we did in the previous video so we are going to do the same thing here with teaming you're going to use the block for theming and we'll be reloading the theme using shared preferences so let's create a new folder settings and i'm going to create a new file app themes where we are going to define two theme one is a dark theme and another one is a light theme so static final app theme data is equal to that's an object and it will have two keys so let's define an app theme enum which will be light theme and dark theme so first one apptheme.lifetheme so that's the key that's going to have a new theme data so you know that so this is how we set the theme in our flutter application so each theme is a set of it's a theme data object so we need to create theme data so here when i set it to green you can see that the title bar is changed to green color so similarly we are going to define a set of colors here for the light theme and we will be doing the same thing for the dark theme but with a different set of colors which will be appropriate for a dark theme all right so let's define some colors primer is background color text theme so inside the text theme i'm going to set the body text 1 which is a textile with a background or let's say color colors dot black since it is a light theme so we'll be using this text theme later and similarly we are going to define the dark theme and it will have a scaffold background color as black and primary color teal background color as black and the text theme so for dark theme let's set the text color to white all right now let's go to our screen which is the album screen and i'm going to add a switch in the abba to toggle between the dark and light themes you can have as many themes you want you can define more themes for simplicity i'm just keeping it as a dark and a light theme so when the switch value is changed we are going to call a new method set theme let's define the set theme method which is going to accept the boolean value from this switch so let's define it as dark theme so if it is true that means the dark theme so let's define the variable app theme and let's name it current theme and if the boolean is true let's say if it is dark theme we will set the theme to light theme otherwise it's a dark theme so let's save it here we'll be coming back to this code later now let's go ahead and create the block files for our theme functionality like we did in the albums list let's create a new folder i'm going to name it themes inside the blog folder and it's going to have the three files block events and state so let's create the theme block dot dot and the second one is the theme event so let's create a new file themes theme events dot dot and third one is the state so create a new file theme underscore state dot dot so the state will have the theme data so this is what we set when we change the theme that would be received by the ui now let's write the theme event so we will have only one event let's name it as theme event and this theme even is going to accept the app theme in the constructor so the user will be triggering a new theme from the ui every time so in this demo when the user toggles the switch in the in the ui will be triggering event based on the true and false values okay now let's write the theme block which extends the block and it's going to accept the theme event and state and it will return a new state so it's similar to what we did with the albums block so let's override the method map event to state that will return the new state to the ui so let's write the constructor and call super here we need to send the initial state which is the theme state here with the theme data so let's send the default theme as the initial state as light theme to the superclass and now we need to implement the map even to state so whenever a new event is triggered so a new theme event so make sure you make this method and a singstar method so that you can return the events continuously with yield new themestate and we will get the new theme from the event so even dot app theme so this event will be triggered from the ui you'll be seeing it in a short while but before that we need to add the blog provider into the root of our application so that the new theme will be propagated across all the all the widgets in the widget tree all right so let's return a block provider and in the create we need to return the theme block just like we did with the albums blog and here we need to have the child with a blog builder and blog builder is going to have the theme block and the theme state and this is going to have the builder method the builder property which will have the context and the new state so that is the theme state and now we need to return our root widget which is the material app from the builder method now let's go to the album screen and this is where we need to trigger the theme change event so let me declare the variable as a local variable and in our switch i am setting it as it becomes true when it is a light theme you can do the other way as well but you need to change the logic inside the set theme method here okay now we need to call context.block and here we need to have the theme block and call add event where the event is our theme event and we need to pass in the new theme here now let's refresh the app toggle the switch button so nothing is changed in the ui so let's try setting the background color of the alba to our theme dot background color okay something has been changed but by toggling nothing is changed in the ui so let's go to our main.file so here we had set the theme as green primary color so something is going wrong so let me rename the variable to themestate and change the theme to themestate dot theme data so that's our theme so you can see that it's changed to the black theme and when we toggle it it is changing back to the live theme so you can see the text to us in black love when we switch to the dark theme right but we want it in white color and vice versa so let's create a new widget so we are going to use this widget throughout the app i'm going to name it txt and it's going to accept a text which is a string and in the constructor i'm setting it by default it's empty and in the build method i'm going to return a container you can just return your text if you want but if you want to set some padding or margin to this text it would be easy if you return a container your text wrapped the container or a padding okay and here i'm going to set a style style which will have a font size of 20 and the color we're going to get the color from our current theme so to get the current theme we can use theme dot off context that will get us the current theme and dot let's use text theme dot uh you can use any of those so this is what we defined already in our theme so body text one dot color okay and then i'm going to my list row and i'm going to change the text widget to our widget reload the app so if you can if you switch the theme you can see that is getting us a proper text name right so these these are the colors that we set in our theme in our light and dark themes okay so that that is working good so you can use you can extend this to wherever you want so that's our title okay title changing to white when we go to the dark theme okay so if you want you can add more colors to apply it on more widgets and you can use it throughout your app if you want so the drawback of this approach is actually we are not saving the theme right so if we if we switch to dark theme and if you reload the app we are not actually retaining the save theme so let's save the theme in our shared preferences so we have added the shared preference plugin in the initial part of the video if you remember so i'm going to create a new class i'm going to say preferences and i'm going to get the instance of the shared preferences and i'm going to save the theme with the key key selected theme so declare a variable for that create a method in it and i'm going to initialize the preferences variable that we just created so how white sharedpreferences.getinstance will get you the preferences instance and i'm gonna write two methods one is save theme and another one is get theme so save theme will save the current theme which is our app theme to our preferences and get him will return that preferences okay the saved current theme so the first thing i'm gonna do is to check if the selected theme if it is null i'm going to set it to a to the light theme by default it may not happen but still and i'm going to declare a new variable theme is equal to i'm going to encode the app theme that's how we can only save the uh save it as a string or an integer or those kind of priority values so i'm gonna set the string by encoding it to a json and then save it in preferences so when we get back i'm going to call getstring with the key that will get us a string and if the if it has returned now that is when you actually load the app for the first time right at that moment we are going to return the light theme and we need to decode the string back to the app theme right so for that i'm going to write a new method get theme from string and pass in the string that we got from the preferences and i'm going to loop through the list of themes we have and check if theme dot to string is equal to the saved string then return that theme okay otherwise return null or you can just return apptheme.lithium which is our default theme there and you need to call the get theme from stream and pass in the stream from the preferences to get the theme now let's go to our main.dart file and initialize the preferences so i'm going to make the main method async and call widgets flutterbindings dot insurance list so that the widgets binding will be initialized before we call run app and we're going to call await preferences dot init that will initialize our preferences instance now let's go back to our main screen which is the album screen and we are going to load the theme from our preferences so let's delete the local variable and create a new method load theme and we need to call context. let's copy it from here so context block and add event with the theme from our preferences so the block will be initialized with that with the save theme and in the seti method i'm going to declare a new variable and when we get the new theme when the user switches we are going to save that theme in the preferences by calling the method save theme let's rename this variable to theme and use it okay so that makes sense all right so we are saving the saving the theme to our references and we are going to get the theme and if it is light theme the switch will be enabled but i think there is some issue we will find it out so here everything looks good let's try again all right okay it's it's not working so we may have done something when we saved the theme so let's go to save them let's set theme looks good okay so nothing wrong there so let's go to the preferences and you can see so here we saved using json encode but when we got back the data from our preferences the string from the preferences we didn't decode it to a json okay so let's refresh the app so now it's working good so it's going to retain the theme whatever we saved if we reload the app or if you kill the app and come back all right so our saving and reloading the theme from the preferences are okay now let's see what we have done so far so uh we are getting the theme when the user selects and converting it to we are using json encode to convert it to a json string saving it in preferences and when we are going to get back the data we are decoding the theme so that's how we saved and we are going to decode the stream and we are going to loop through the themes the themes list we have and we are going to find the proper theme and return that theme so you can see it's a live theme so when it matches it's going to return the theme and we will reapply the theme using block so if i switch back you can see the theme string is now the dark theme and the theme is the light theme so it's not going to match now so it goes back so dark theme now it's going to match okay and it's going to return the theme which is the dark theme so that's how it's working now you can implement it any way you want the main thing is you need to get the theme back to the blog so that it can reload uh it to the ui okay so if you want you can make this method asynchronous so that the ui will be smooth so i have a typo in here let me fix that okay and i'm gonna reload the app so let's go through what we have done so far for that let's go to the theme block first so as i have said in the previous video and this video so in the load theme we are going to we are actually setting the theme block by firing and even with the new theme correct so if you go to the theme block you can see that it accepts an event and a state and it's going to return a new state which is our new theme right so this is how we initialize the theme block so while initializing you need to send a defaults the initial state okay so here we our light theme is the initial state and if an event occurs we are going to get the theme from the event which is the user set theme when they use the toggles of a switch that's the event that's coming from here so when we get that we are actually setting the block with a new theme and that's going to fire the block builder right and that's going to reload the app so here we are getting the theme and we are setting the switch okay so when the user selects this is the theme that is going to the block so light theme or dark theme based on the value from the switch and then we are adding the event theme event so that will fire the event inside the block and we are wrapping the whole app with a theme block so this is the important part that you need to do whichever classes that want to listen to this theme change or whatever block you are doing you need to wrap the that particular class with a with a proper provider and inside so here we are seeing the theme and preferences and when you change the theme and you initialize the block with the new event and the state it's going to fire the block builder whichever wherever you have provided that block builder with the theme state and event and state that's going to fire so here in this demo we are having the block builder in the root of our application so it's going to rebuild the whole widget tree so that's why the theme is propagated throughout the app okay so that's how it works uh so hope uh this video is clear so if you have any questions please put it in the comments below and i'll try to reply to that as soon as possible and so that's all in this video i recommend watching the first part of this video tutorial i'll be providing the link to it in the description so please subscribe like and share and thanks for watching see you in the next video until then bye

Channel: Mobile Programmer

Views: 4,590

Keywords:

Id: v6vt0fmE85g

Length: 26min 12sec (1572 seconds)

Published: Sun Dec 06 2020