Flutter Themes Crash Course

welcome back to blog dev everyone today we're going to be going over flutter app theming this is going to be a crash course teaching you how to toggle between light and dark mode showing you how to set up your app theme create a custom app theme and most importantly how to reference your app theme to utilize different colors and different types of styling in your application be sure to watch till the end of this video because every little piece is very important to fully understanding app theming and flutter let's get into it what you're seeing here is the root base core application that flutter provides when you create a new project although i have shelled out some of the things already i've replaced a couple things such as adding an icon button to my app bar and changing some of the text widgets in the column i've also gone ahead and create a themes.dart file this is the file that we're going to be using to establish our light theme and our dark theme and we're also going to create a method in here that allows us to toggle back and forth between light and dark you'll also notice that in this custom theme class that i've created i basically use the change notifier class and the reason for that is we're going to create a listener within our main class which is going to listen to a method within this custom theme that way it knows when it needs to update itself and check the theme again and we're basically going to call that method every single time that icon button is pressed so the first thing i'm going to do is i'm going to create a static rule method called is dark theme and i'm going to set that to true the next thing i'm going to do is i'm going to create a method that is going to return a theme mode object called current theme and we are going to have it return um in an optional so if you followed some of my tips on twitter for flutter um we can do this with optionals we can say is dark theme put a question mark if it's true we can return thememode.dark and if it's false we can return thememode dot light and then as mentioned before with our listener we're going to create a method called toggle theme and this is going to say is dark theme is equal to the opposite of is dark theme and basically whenever they push the button we're basically just going to change the boolean value for is dark theme from whatever its current value is to the opposite value so if it's true it'll go false if it's false it'll go true and then we're going to call notify listeners okay the next thing that we're going to do before we create a custom theme we're going to go over to our main.dart file and we're going to delete my app we're to create my app again but we need it to be a state full widget not a state list widget and so we're going to save my app okay and we're going to let this stuff stay the same and in my app state this is where we're going to change it up a little bit um instead of this widget build actually we do want that instead of a container we want to return material app okay and before we call that we're gonna have an init method void and knit state okay super dot and it states that's just the default and then this is where we're going to set up that listener so we're going to say current theme import dot dot add listener okay and we're going to call set state that looks good so what this is going to do is basically we're instantializing this listener on that class so whenever whenever notify listeners is triggered from within custom theme what it's basically going to do is it's going to call here and it's going to call set state which is going to refresh the state of the application thus enabling us to toggle the theme because it's going to check the theme again and the value is going to be updated up at that point okay so let's go ahead and keep on filling out material app so the first thing we're going to do is we're going to do home and we're going to set that back to exactly what it was my home page have a title of uh flutter theme demo okay see what it's upset about oh there we go the next thing we're going to do is we're going to give it a title and same thing here just flutter theme demo and then we're going to give it a theme and that's going to be custom theme dot and it's going to be called light theme but we haven't created it yet we're going to create a dark theme called dark theme and we're going to have a theme mode set to current theme dot current theme okay so that's all we're going to do in our main.dart file you'll see here we're getting errors and that's because we haven't actually set up our themes yet so let's go ahead and do that next okay so we're coming back over to our custom theme class and underneath our toggle theme method we're going to create a static theme data object called get light theme and then we're going to do the same thing just below called dark theme you'll see here that those errors now went away because they exist and in here is where we're going to return some theme data objects copy these okay and let's get to fill them out so we're doing the light theme first so we're going to do a primary color of colors dot light blue a background color of colors dot white a scaffold background color of colors.white and then we'll do some text theme text theme is going to have a text theme object and that's going to have values for [Music] headline and we're only going to worry about coloring we're not going to get too in depth with you know customizing this making it look good we mainly just want to demonstrate um the use cases of this so we have body text one body text two okay and i'm gonna go ahead and actually copy all the contents of this theme data down here in this one and all we're going to do is we're just going to change up the colors so instead of primary color being light blue primary color will be black the background color we'll make it gray and the scaffold background color we're going to make it gray and since we have a dark background we want to change the text to be white instead of black okay and i'm actually going to add for the dark mode i'm going to add an accent color of red okay and that's all we have to do so let's go over exactly what's going on here before we run it and show exactly how it's working a little bit better so what we have here in our main method is we have this material app object that's being returned it has a theme a default theme set to light theme it has a dark theme set to dark theme it has a theme mode which is going to call the current theme object and the current theme object is going to be set to either dark or light mode you can see here we either set it to the mode dark theme dot light and that is entirely dependent on the value of this boolean is dark theme initially it's set to true but whenever the user clicks our button it's going to call toggle theme which reminds me we haven't actually set that up yet so let's do that next but it's going to call toggle theme which is going to change the value of is dark theme call notify listeners which will in turn go back to our application hit the submit state method current theme.listener and it's basically going to execute this bit of code in here which is going to refresh the state which will have it check theme mode again and you'll see it's a different theme mode and so it'll flip and do the inverse theme and let's go ahead and just do that one last thing i talked about you can see here in our on press method we don't actually have anything yet so let's go ahead and add that next so in here we're going to call current theme dot toggle theme it's the name of our method and we should be good to go so the only thing left to do is to run our application so i've got my emulator here i'm going to click run without debugging wait for this to pull up all right here we are so initially it's defaulting to dark mode and that is because we have is dark theme set to true now if we had it set to false at the start and we were to restart our app you'll notice it starts in light mode okay so now we're going to do is we're going to test our button to see if our notifier is working properly so we click it you can see here it's toggling back and forth the text color is updating the top background colors updating the black and then the gray and on the inverse side we have our light blue and our white and the text is black as well and it's as simple as that so we're going to go over one more small detail when it comes to app theming you can take this as far as you want you can deck out your custom theme with all sorts of information if i look at theme data here these are all of the different values that you can set so if you have a complex color scheme and theme that you want to implement your application you can do that and you can check out all these different values and you can set them in your custom theme and what it'll do is it'll default the coloring and the styling of different widgets to this theme unless you say otherwise so that's the beauty of using a custom theme in your application is that you don't have to type a bunch of repetitive code instead of having to type you know colors.white in our dark theme every single time we can just let it default to the white color so that's the beauty of having this type of theming now like i said there's one more thing that we want to do and what we want to do actually is we want to default the accent color so actually not default i'm sorry we want to use the accent color in our widget dot title so we have this text widget and we're going to give it some styling that's different from the default and so we're going to say text style and for the color we're going to say theme dot of context dot accent color okay and what this is going to do is we're basically saying i want you to get what the current theme is whether it be light mode or dark mode and i want you to grab the accent color value and set that to the color of this text widget so we're going to go ahead and restart this app and what we should notice is in dark mode it should be red you go in dark mode it's red and in light mode it's this blue color and the reason why is it's defaulting to the flutter base theme um because we haven't set it yet so if we actually do the same thing here let's copy this go up to light mode and let's set it to let's do like a a green something very obvious okay that is very hard to see but you get the idea um we can switch it to the other um let me go ahead and increase the font size here i'm sorry if that was difficult to read but basically what we're doing is we're setting up some custom color here and we can reference it by calling this theme.ofcontext object and another thing that you could do if you want to make this a little bit easier is we can say theme.of and we can say theme is equal to that and that is an object type of okay we want it to be final and so instead of repeating theme. of context every single time we can just call theme and so if we were to use this in multiple different places that's that's the way we could do it there you have it that's custom theming and flutter it's very simple obviously it takes a little bit of preparation and setup i will provide the source code though in the description below if you found this video useful make sure you click that like button below and subscribe the channel for weekly flutter content and i'll catch you guys next time

Channel: Bleyl Dev

Views: 10,143

Keywords: flutter, flutterdev, themes, app themes, custom themes, flutter theme, flutter theming, google flutter, flutter ui, flutter ux, flutter themes, bleyldev, bleyl dev, tutorial, how to, learn to, coding, programming, dart, dartlang, apptheme

Id: oHe-bGowiBc

Length: 14min 35sec (875 seconds)

Published: Fri Apr 16 2021