How to Setup a Custom Theme in Flutter for a Light and Dark Theme - 2023

assalamualaikum and welcome back to coding with tea today we are going to learn how to create themes in the fretter or how we can set up themes in the flutter in this tutorial first we will learn what are the themes how we can customize the default themes and also how we can use light and dark themes in the flutter and also we can switch from light theme to dark theme and also we can set that theme mode to system theme then we will learn how to use color stretches in the fretter and how we also can create our own color stretch and what is basically the benefits of using color swatch in the theme and then basically we are going to create our own custom theme from scratch so this video is going to be very useful doesn't matter if you are watching this playlist or not if you are here i suggest you to watch the video till end and don't forget to subscribe the channel if you're new so let's get started as you can see we are creating login application for the flutter you can use this application on any flutter application that requires login sign up so let's open android studio [Music] let's quickly have a recap of the previous tutorial in the previous tutorial we learned how to set up the folders or the folder structure so we learned the feature based approach and layers basic approach if you are new you can watch the video link is in the description or you can get it from the right top corner and we also learn how to create these packages assets etc etc so let's start with our today's tutorial you can see in the main door dart this is basically an entry point if you're new to the flutter you don't know about this run app this main function and also what is the stateless widget and straightforward widget you can watch our previous course which is a flutter basic crash course it's very useful so for today's tutorial i have created simply a stateless widget and name it app inside you can see we have simple material app and as a home we have app home and in this app home as you can see on your screen at the top we have an app bar which is in inside the scaffold we have an app bar we also have a floating action button at the bottom and then in the body of the screen we have given some padding and as a list view to make it scrollable we have three text boxes or three text widgets then we have elevated button outline button and in the padding we have an image so i have created this just because to demonstrate you how theme works so for that we need to have some of the text buttons and floating action button in the network so you can get this code from the codingwithtee.com i will drop the link in the description of this video okay now head towards the material app basically theme is the part of material design so we need to define the material app widget and inside we have a theme property you can see we have a theme and this theme is returning theme data so let's create theme data and just for a quick look you can see on the top we have lot and lot of options basically this theme data doesn't only provide customization of background colors primary color scanner color action color icon colors etc but it allows us to create complete themes for app bar complete themes for buttons elevated button outline button text button icons floating action button basically we can customize everything that is inside the material design so this theme data is going to allow us to customize anything so you can hover over it and inside you can see we have multiple options multiple colors text themes bottom navigation bar card themes chip themes and lot of stuff so before designing this basically the error is that we cannot use constant here error is gone the first thing you need to know is this theme is working as a default theme but when we hover over it in here you can see this is actually a theme data dot light it's currently the light theme but when we are going to use dark theme you can see we also have an option if we like to create a dark theme and it also going to have theme data so this is how we define light theme and dark theme so this will work as default theme if we don't have dark theme but if we have a dark theme then this will be the light theme and also how we can switch between light and dark theme so for that we have theme mode we can set theme mode to dark light and also to system system means that whatever the mode of the device so let's say we want to use the dark mode let's save the code nothing changed because currently both theme data are empty and the default theme is being used so inside the theme data let's try to see changes we have a property called brightness we have just defined the theme data so system basically don't know about the light and dark so we have to define the brightness to dark this means that this is going to be dark theme and in here we will provide brightness dot light now let's save the code and you can see that application has turned to dark mode by just defining a brightness you can see the app color has been changed app bar these are the primary colors so they are not changed and you also have noticed that background and app bar color has been so a floating action button color has been changed so now let's again switch it to light mode save the code and you can see that it's back to the light mode we can also change it to system save it currently system is using the light and let's try to switch it to dark mode and you can see without changing anything our theme has been switched to dark mode so this is how we use light theme dark theme and also use theme modes let's head back to the white theme now we learn what is light theme what is dark theme what is a theme mode and how we can use these themes so we are going to come back to this theme data but as you can see we have headings of heading and paragraph but currently they are not being displayed as heading subheading and paragraph they are plain text so in here i am going to demonstrate you that how you can apply themes on your text on your buttons on anything so inside this text we have a property which is style so i am not going to create a custom style but i am going to give it theme style theme dot of context context is the current class dot you can see we have a theme data properties we have all the properties which are inside the theme data so this is a text so we have text theme dot and here we have headings headline one two thing if you're coming from the web background as in the websites we have on the html we have h1 h2 till h6 so in here we have headline one till headline six let's say we want to use headline one here and we don't we cannot use constant now let's save the code and you can see that heading has been changed i will also share with you the actual sizes that headline one two till six and all the other elements being worked what are their properties you can also get them from the codingwity.com now change to headline 2 and save the code and you can see that size has been changed and also line height has been changed right so now let's copy the style [Music] so this is basically how we can assign properties of theme this was for the text theme now let's try to add color to this scaffold as a background color let's add theme dot of context dot let's say i want to use this background color primary color highlight color and change it to background color save it and you can see that background color has been changed to some shade of this blue okay the next step is if you notice here that the top app bar top color is a bit dark but it's blue then we have the lighter shade or the primary color and then again the background is having another another shade of the blue then again we have primary and then we have again a bit darker this text color right so basically these all variations comes from primary scratch color inside the material design let me just remove this okay to change these colors let's say we don't want to use blue but we also want to keep all the rest of the design but we just want to change the color of the theme so for that we have primary scratch prime swatch is basically variation of color it's not a single color so we can use colors dot let's say want to use d purple for the light theme save the code and you can see that all the colors all the colors has been shifted again it's a dark purple and all the different shades are there okay to see the effects of the primary stretch or what it is over over it okay here you can see we have a deep upper color but it has some shades means that when we're going to use deep purple this is the actual curve but when we are going to use its darker modes then shade 600 7 8 and 900 and then we are going to get back its shade 400 300 250 so basically the shades are you can use them or you can consider them like this is a 10 opacity this is 20 this is 30 so basically these are the variations of the color same goes for purple and bunch of other options now let's click on this deep purple to see the color swatch how to create a crushed edge basically so it is a material color it has the primary color and then we have all the shades of our primary color right you can see 500 is basically the actual color which is displayed over here which is the actual color it is not some shade but rest of them are all the shades of the colors to create our own prime stretch for example you want to use specific color for your theme for your application so to create your own custom switch and now we can create our own color so we know primary scratch is a material color hints of how to use any of the widgets so first we need to define the primary which is an integer primary is a color so so to create a color inside flutter or inside android we have to first press 0 x and then double f basically this double f is an opacity this is a hexa color code and then we have to define the actual color which is this is the actual color code this is the opacity and this is for hexa definition right integer comma color and in the secure brackets we will define all the colors as we have already seen first one was 50 colon you can see it's and it's a 50 so click on this color icon over here you can change it to 10 percent you can see it's a bit dim okay i have changed this primary color swatch to all these variations and i have just you can see change the colors and on the application you can see it's yellow color so yellow color with the variations has been applied this is a dark color and all these colors are there this is a ripple effect with some yellow shades are there so this is basically how we can use primary swatch so now we learn how to use light theme dark theme how we can play with the default values of the theme now let's try to create our custom theme because we cannot extend this theme and dark theme over here our application our main application or the start point will get show you that it will not be manageable so instead of doing this we will go to the folders we created in the previous tutorial in the util create a new directory theme inside we will create theme dot dot let's import material the dart and we will create a class here class name is t app theme so whenever i am going to create the custom class i will start it with the t you can consider it coding with t or whatever you like to just for the remembrance and for the custom classes okay now head back to main dart and in here you can see we have a theme data which is a light theme and also theme data for the dark theme so let's say so it will be static constant theme data so basically we don't need we cannot add constant with the theme data so we have a light theme ctrl d to duplicate change it to dark so we have light theme and we have dark theme now let's try to change this theme data with the theme data we created cut it from here paste it here make sure end with the semicolon we will also do it for the dark theme okay let's just remove this primary stretch okay now you can see we have a light theme and we have a dark theme to use it we will go to main.dart and in the light theme we will call t app theme the name of the class and press alt enter hit import it will import the library you can see we have to import this now as it was a static so we don't have to call its instance we'll directly call the light theme here and same we will do for and we will change it to dark theme for the dark theme this is the maximum code that we need to add inside our app so this is a pretty clean and nice app so basically our entry point will be very simple and very easily manageable so head back to theme. whatever we want to do is now it's a now it's inside this theme.dart now let's align the code and inside the theme. the next thing we want to customize is or to learn is text theme you can get all the themes related to the app that we are going to create from the coding with t make sure to subscribe the channel inside the text theme when we press ctrl space and we are we have all the options that we can add you can see we have headlines body text body text small caption button headlines from one to six we have labels over line subtitle and so on so these are the text theme options let's say we want to use whenever i want to use headline two we don't want to change its size now to customize our headline we don't want to use these fonts if we have the fonts created or added offline in the assets then we can also call these from assets slash font slash whatever the name of the font is but we are going to use google fonts as our application will be running on internet because we have to make sure that our firebase works so for that we are going to use google phones so to add a package go to pubspec or dml okay in the segment dml please don't get confused i have just remove all the commands so to remove the commands press ctrl r to replace and make sure the rejects option is enabled this was enabled but change it to regex and to remove all the lines the comments in the prospect has started with the hash sign as you can see over here to select the complete sign which a complete line which is commented press dot static and it is going to select all the line which is commented so this is how and press the replace button this is how you can replace all the commands at once the first way is we can go to the website i will drop the link in the description you can get all the dependencies from there all the packages of the flutter from there and the other way is we will go to terminal and inside we will write flutter pub add and name of the dependency which is google fonts hit enter okay it's added and now minimize it you can see we have google fonts with the latest version and make sure you have internet now to make this effectible click on pop get or you can also run the fretter command which is sweater pubget and now let's close it inside the theme we have to call google fonts to import it press alt enter and inside you can see we have imported this library which is google fonts google underscore fonts dot dot over here now we can use any font which is a google font as a heading we are going to use monsieur and in here let's say we want to change the color as is a light theme so we will stick with the black 87 now let's save the code and you can see that heading has been changed the color has been changed and also the phone style is has been changed basically we are not using anything extra on our application but we just change this headline too and in the main road dart you can see over here we are using headline two as a heading so we have defined now we are only customizing our theme which is headline two and we change its font color and rest assure we can change anything related to this headline too or related to fonts inside this google fonts decoration and bunch of other things let's say you don't want to use google forms then we have a text style you can see there is no error so this is how we can customize all the things press alt ctrl space and we have all the options available right over here so as we are going to use google phones so this is how we can assign the fonts let's say we want to use subtitle two and it will be google fonts dot as a sub heading we can use pop-ins we can use monsieur it's up to you you can use any color let's say we want to change this color to black 54 a bit lighter than the main heading and also we want to change its font size and you can see that fonts have been applied and the color has been changed to a bit lighter shade and this is how we can customize all the properties we will same do it for the dark mode but the color will not be black but let's save it let's change the mode so this is basically how we can customize all the things we can customize our buttons so now the thing is we cannot add everything also inside the same class so that's why i created a folder called theme and inside i'm going to call another folder i'm going to name it widget themes and inside let's create a file text themes or dart again we will import all the things we'll create a class it will be text theme let's make a static so this is how we will define the text theme this is a light and this is a dark so again we will simply cut this text theme that is for the light import google fonts over here now to use these designs we have light text theme and in here we will call the text theme we have to press alt enter and import this library dot light text theme and also do the same for the dark change it to dark text now we can easily grow this main theme and now we have a clean code and readability is very easy and in here same way we can add elevated button theme elevated button theme data and in the style for the elevated button elevated button dot style form press ctrl space and you can see we have all the options related to button we can easily customize it we have a text style we we can use this text style from the text theme style so it's all up to you we can also create our own class related to elevated button theme or the buttons theme then we can create appbar theme and all the features related to this we will put inside in the widgets theme folder and you can also get all the code from the link down below in the description on the website which is coding with t so there's one more important thing that we are missing here which is that we don't want user to access our theme using an instance of the class so we have to make this constructor private so to make the constructor private in the dart we just have to call the class name and instead of simply calling the constructor we will write dot and underscore so this underscore means the private sign as with the variables so this is the norm of dart so that's it for this tutorial i hope you learned something new this was a bit long tutorial but this was a very useful tutorial and thank you for watching if you learned something new please like the video and if you're new to this channel please don't forget to subscribe because more amazing videos are coming along the way thank you for watching take care

Channel: Coding With T

Views: 60,116

Keywords: flutter, flutter theme, flutter dark theme, flutter theme tutorial, flutter theme 2023, theme in flutter, theme in flutter 2023, dark theme in flutter, dark theme flutter 2023, color swatches in flutter, custom theme flutter, flutter custom theme, how to use flutter theme, flutter themedata, flutter themedata tutorial, theme widget, what is the theme widget, theme widget tutorial, coding with t, flutter dark mode, dark mode in flutter, flutter 2023 tutorial, theme flutter

Id: Q9FosAdX2U4

Length: 21min 56sec (1316 seconds)

Published: Mon Aug 22 2022