Setting Up Themes in Flutter

today we're going to learn how to set up themes influctor using these themes first of all we will make sure that we have a reusability in all type of projects after this lecture you will be able to create any type of theme for your flutter project and once you have a perfectly designed theme you can reuse that theme easily in any type of flutter project so first of all let's see what are we going to achieve okay as you can see on your screen we have a text field currently we have a dark mode and we have a text field which is visible on the dark mode and then we have remember me password we have elevated button over here then we have outline button and let me just switch it to the light mode and you can see when we turn the system theme to light mode and everything is no change it is in the black color we have two icons and then in the sign up you can see we have different fields and different options now let's click on the sign in and in here you can see currently we have a light mode and everything visible is basically in the light mode you can see the top custom app bar this is again going to be a custom theme and later on we will make sure that every widget is going to be reuseful same as I have turned this into the dark mode you can see we have Darth mode with different theme options at the top you can see we don't have anything changed in that bar but when we go to the store you can see the same custom app bar is now in the light color so this is what we're going to achieve today if you're following the series you know that we are creating flutter eCommerce application and we are currently in the section one in the previous tutorial we covered types of folder structures and we learn how to implement or how to add professional expandable folder structure for your application okay so in today's tutorial we are going to talk about what is theme how to set theme data what is theme light and dark modes how to create custom themes again we will learn all type of different themes including text theme elevated button outline button text field chip bottom sheet and bunch of other themes definitely these all going to be very useful and definitely reusable in all other projects okay so let's head back to the project we created for our flutter replication if you're new you can watch the videos link is in the description and also get the playlist link from the right top corners okay let me just remove this Demi data okay remove everything if you don't know what is this main run app and what are the status and schedule widgets I suggest you to watch the previous flutter crash course again you can get the link from the description below okay so first of all we need to create our own new class so you have to just write STL which is a shortcut to create a new class and I'm going to name it simple app and we have to call app from here in here you can see we have placeholder but we will change it to material because material app is our starting point for the application now enter this material app let's talk about the theme if you are confused or if you don't know what this variable is you just have to hover over it and this is a theme data type of variable which requires theme data so let's try to pass theme data over here and inside you can see we have lot of properties at the top we will see each of them in a few minutes remove the constant error will be gone now inside this press control space and you will have a list of values which you can add inside this theme data you can see at the top we have action icon theme app bar theme background color batch theme better theme bottom ever theme bottom sheet theme and list is keep on going so this means that using this theme data we can create and customize every type of theme we required in our application right but how we can use a dark theme and how we can make sure that when the system theme is going to be changed our theme should be changed right away so basically this default theme is the light theme when we are not going to provide anything default theme will be used but when we are going to provide anything inside this theme it will be treated as a light Theme by default so let me just first show you we have a theme mode so when we are going to set this theme mode to theme mode dot you can see we have we have dark mode light mode and system mode by clicking on the system mode now automatically flutter will detect the theme of the system and will apply the theme on your application if you want to keep it light light is by default but if you want to keep it dark you just have to pass dark over here and it will be dark Theme by default okay so let's keep it for the system we know that this theme is the light theme and for the Dark theme we have to provide Dark theme same it requires theme data and by this way we have a light theme then we have a dark theme and then we have already defined which theme mode we are going to use okay now when you hover over this theme data you can see we have lot of properties that we can change we can change card color canvas color brightness color scheme divider color disabled hint over primary colors and list is keep on going we can change each and everything inside it we can change complete themes of buttons app bar each and everything can be defined over here so let's say if I am going to Define all the properties right over here our this application is going to be very messy our this class is going to be very large let's say I'm going to add a text theme which we will create in few minutes but let's just take an example create a text theme now inside this text theme you can see we have lot of other options that we can add titles subtitles labels headings body caption and a bunch of other things so if I am going to add a body large theme and I have to hover over this and by this I can see that I have to provide textile so let's say I'm going to create a textile and by this way I first have to add all the text themes it's very difficult to manage everything over here on the screen first we have to manage it for the light mode which itself is challenging but then we again have to create everything for the dark mode we know that dark theme requires theme data so we can create some other class or we can create a function which returns theme data and we can easily put it right over here to make our code clean and definitely reusable and again theme which is light theme requires theme data so we can again pass the same thing to this so let's create something custom let's keep these three properties as it is and let's go to utils so we created this folder structure in the previous tutorial and in the themes let's create a new class theme dot dot hit enter and first of all import material Library okay you've created a simple class and its name is t app Theme whenever I'm going to create in upcoming videos custom functions custom classes I will use T as a capital letter or a starting point for any custom widget so if you are going to use this code you just have to call T and all the custom widgets and classes will be right in front of you so you can change this name it's all up to you the app Theme know that if we want to make sure that this theme Constructor is not going to be used again and again so just add underscore which means a private sign and that's it now it's Constructor is private because Constructor is private we have to now create static functions so that we can easily call them using TR theme dot name of the function so what we want to return return theme data because light and dark modes require theme data so our function should return theme data name of the function is let's say light theme okay now here are two things that you can do you can create function like this which will return theme data on the other hand instead of creating a function the easy thing is you just have to create a variable of team data which would be static so that we can easily call it now this theme data is going to return theme data of our choice right so we have light theme control D to duplicate and now we have to change this to Dark theme so we have two theme slide theme and dark theme now we can easily call these themes in the main.dart in here you just have to write TF theme dot this is the light theme so I will pass the light theme over here and then for the Dark theme simply copy and paste it over here changes to large theme at the top you can see we have to import it using the package and once imported you can use it right over here okay once both like to log themes are added okay now let's try to add entries in the live theme first of all we as we're going to use the material design 3 so we have to pass use material design three to two next we can add font family which we already added in the previous story so we just have to pass the name of the font family which is Poppins and very important thing for the light theme is the brightness because without the brightness our theme will not be able to understand that is this Constructor is going to be a light one or the dark one so we have to cross the brightness as brightness dot light this means that it's going to be light mode then we can also add primary color for now I'm just going to add blue but in the next video we will first create all the constants in here in the constant we will add all the colors so we will not be using this these colors but we will use their primary color which is mentioned inside our constraints throughout our application secondary accent different type of other colors so we will create everything related to constant device format is in the next video and next let's press Ctrl space and you can see we still have lot of options but now we want to create a text theme for the light mode and again the text theme for the dark mode so on dark mode is selected our text should be in the white color and the light mode is selected our text should be in the dark color right so to create a text theme again we have two options we will start creating everything inside this class the class we have over here everything like you can say text theme chip theme app bar theme check box theme bottom sheet and the list is keep on going so again the code will become messy so that's again a not good practice so one more thing that I'm missing over here is creating a scaffold background color because scaffold is treated mostly as a different screen so by adding a scaffold color you decide that what scaffold color you are using so it's the light theme and I'm going to use background as a white now again to create a text theme you can see we just have to pass text theme to this property and you hover over it and you can see we have to pass text theme the same process for both light and dark modes so let's go to theme folder create a new package custom themes inside create a new file name a text theme dot Dart hit enter and using the same property you first have to add the material design material Dot and next we have to create a class I'm going to name it t text theme its Constructor is again going to be private and now we have to follow the same process it should be static it should return text theme and name of it will be light text theme okay now to create a dark mode just press Ctrl D change this light to dark and now we have light tech Sim and dark texting let's head back to theme property and instead of theme so first I have to import this one then you have to call ttex theme dot light text theme okay for the dark mode let me just copy all the properties we want to use material design 3 for the dark mode same font family brightness will be dark light for the light theme dark for the Dark theme primary color will be same blue then scaffold background color is going to be black and definitely for the text theme we are going to pass dark text theme and over here we have a light texting let's head back to text theme and first we want to learn how to add text theme okay inside the text theme when you press Ctrl space to see all the properties you can see we have different values body body large medium small then we have button caption display sizes these headlines headline one two three four five six are obsolete do not use this one instead use headline large headline medium headline small then we have labels over line then subtitle one and two is again obsolete then we have title large title medium and title small so it's again a your choice how you can customize you can use two to three text team Properties or you can create more than two to threes so let's say we we want to create a headline as you can see on your screen this title is using headline large so we have to create headline launch property when you hover over it on the headline now you can see it's a textile so we have to pass textile now again in here we have two options when you hover over this you can see we have all the properties listed over here to create everything from scratch and another option is to next to this Constructor use Dot and call the copy with method and now inside this copy with method you have to pass everything like font size color whatever you want to pass over here what this is going to use is this is not going to create a new Constructor but this is going to copy the default values as well as the values we are going to change so first of all let's pass font size this is going to be have 32 font size next we are going to assign font fade as bold then let's assign a color because it is a light theme we are going to use the dark color because we don't have colors yet so let's say the black color again when we're going to create colors and font sizes we will not use the static values we will definitely call the values from these constants so for now for this example let's keep it this way when you have this line you have to add a constant press Ctrl d change this headline large to headline medium and in here you just have to change your fonts settings whatever you want to use I want to use headline medium s24 it will not be bold it will be medium bold so w 600 let me just show you so you have bold normal these are the weights of the bolt till 900 so it's up to you which you want to use so w600 is a medium bold color will be black so by this way you can create all the values and let me just copy it and paste it for the dark mode when the background is dark we definitely want to use the white color you can see font size properties are same font sizes same font weight is same because we don't want to change these things it will not look professional because we when we have different values on the light mode and different values in the dark mode it will not do good we will just change the colors to make it visible okay let me just quickly add all the values okay here I've just created some of the text themes that we're going to use in our application for the e-commerce app we have three type of headlines we have three type of titles three type bodies and two type of labels same for the light and dark ports you can see the font size are same for both light and dark modes font weights are same we just have changed these colors if you want this code you can get it from the coding with t okay next as we have created a text theme our text theme is completed the next thing that we want to create is elevator button theme which requires elevated button theme data so it's all up to us we can pass values over here and again we can create a new class let me just create new class quickly okay here you can see a faded elevator button theme and a custom elevated button theme class for both light and dark modes so let's go to the class in here the name of the class is T elevator button theme the same way we have created text theme so again we have two type of instances over here the first one for the light and second one for the dark for the light mode as it requires elevator button theme data so we have to create elevation button theme and use the style property to style our button because it is a primary button it will have a blue button background and white text for both light and dark modes if you want to change it you can just have to change the values for the lock dark and light mode over here so again we will not use these colors.void colors.blue but instead we will use all the colors and values from the constraints so for now elevation 0 is going to remove the height foreground color is the color which is on the front which is the color of the text which is a foreground color and background color is the background color of our button which is the blue color then we have disable foreground color disable background color if in case we don't want to use that button so when the button is going to be disabled this color is going to be applied then we have sides which is a border past the Border Side pass its colors you can add further values stroke align style and width for the Border then we have padding textile and shape of our button for both light and dark modes using the same Technique we will create outline button again here you can see on the left side I have created multiple themes so first of all let's talk about the app bar theme so ever theme is for both light and dark modes app bar will have no elevation Central title will be false scroll under elevation is again going to be false background color will be transparent surface color is again going to be transparent icon colors are going to be black and each icon color will have this size again these all colors and sizes are not exactly what we are going to use in our project so if you are going to watch the next tutorial I will make sure that I am going to add all the constraints and then definitely all the constraints are going to be assigned this you can get the updated code from the codingwitty.com link is in the description okay once we have both for the light and dark modes let's check the bottom sheet theme in the bottom Sheep theme again we have light and dark modes bottom shade theme over there Shadow color show drag handle which is the center dot then we have a background color model background color constraints and then definitely we have a shape of the bottom sheet then we have check box now in here what you have to see is when you create create a shape it will be any type of shape but I have created a rounded rectangle border with the Border radius and then next we have a check color so create a check color you have to create a material State Property dot resolve with and if date is selected in short color will be white else color will be black so this is the color of the check which is you can say the icon color then the fill color is again going to use the same technique if the state is selected then the background color will be blue if state is not selected it will be transparent you can create it white you can create it black it's all up to you so same I have created for the dark mode then for the chip theme this Chip is going to be used as you can see on your screen on product Details page disable color will be gray level style is black selected color is blue padding we have some padding check mark color is going to be white and same we have different theme for the dark mode then we have elevated button Outlet button text field theme so this is going to be a bit long as you can see on the screen we have two type of text themes the one is for the light mode one is for the dark mode error Max lines going to be three we have some large error which we want to display and it can easily contain up to three spaces and prefix icon color suffix I can color ever style is a text so we have to use again the textile dot copy with and then you can pass all the values into error floating label and down below you can see we have border outline border then we have enable border same with with the outline border property Focus border error border and focused error border and then again for the dark mode we have all the values with a different colors and then you already seen to create a text theme let's remove this test delete it from here and we have no arrow in the code we have created all the type of themes okay never I just have to import all the files over here and then you just have to call or each of them checkbox theme requires a checkbox theme for the light mode bottom sheet elevated outline button import decoration and same all the themes for the dark mode now whenever we are going to use the button we don't have to pass or we don't have to design again and again for the button it could be any button same goes for all the themes we have defined and using the same technique you can create action icon theme batch theme better theme bottom app or theme bottom navigation bar theme button bar theme and you can see we have unlimited options over here so you just have to design this by using this technique we can easily copy and paste the themes let's say you have multiple app bars so you just have to create a folder for the app bar themes and in here you can create different let's say a transparent type of theme colored app bar theme and bunch of other options you can create over here same we have have buttons so you will create a button folder and create multiple themes and now when you have a large collection of theme and if you want to create some other application and you want to copy this data for some other project you just have to copy this custom themes folder paste it into new application and your application is good to go so that's it for today's tutorial I hope you learned something new in this tutorial if you learned something new please like the video and if you're new to this channel don't forget to subscribe it and hit the Bell icon to get notified about upcoming videos once again you can get the code from the description below which is the codingwitty.com thank you for watching take care Allah office

today we&#39;re going to learn how to set up themes influctor using these themes first of all we will make sure that we have a reusability in all type of projects after this lecture you will be able to create any type of theme for your flutter project and once you have a perfectly designed theme you can reuse that theme easily in any type of flutter project so first of all let&#39;s see what are we going to achieve okay as you can see on your screen we have a text field currently we have a dark mode and we have a text field which is visible on the dark mode and then we have remember me password we have elevated button over here then we have outline button and let me just switch it to the light mode and you can see when we turn the system theme to light mode and everything is no change it is in the black color we have two icons and then in the sign up you can see we have different fields and different options now let&#39;s click on the sign in and in here you can see currently we have a light mode and everything visible is basically in the light mode you can see the top custom app bar this is again going to be a custom theme and later on we will make sure that every widget is going to be reuseful same as I have turned this into the dark mode you can see we have Darth mode with different theme options at the top you can see we don&#39;t have anything changed in that bar but when we go to the store you can see the same custom app bar is now in the light color so this is what we&#39;re going to achieve today if you&#39;re following the series you know that we are creating flutter eCommerce application and we are currently in the section one in the previous tutorial we covered types of folder structures and we learn how to implement or how to add professional expandable folder structure for your application okay so in today&#39;s tutorial we are going to talk about what is theme how to set theme data what is theme light and dark modes how to create custom themes again we will learn all type of different themes including text theme elevated button outline button text field chip bottom sheet and bunch of other themes definitely these all going to be very useful and definitely reusable in all other projects okay so let&#39;s head back to the project we created for our flutter replication if you&#39;re new you can watch the videos link is in the description and also get the playlist link from the right top corners okay let me just remove this Demi data okay remove everything if you don&#39;t know what is this main run app and what are the status and schedule widgets I suggest you to watch the previous flutter crash course again you can get the link from the description below okay so first of all we need to create our own new class so you have to just write STL which is a shortcut to create a new class and I&#39;m going to name it simple app and we have to call app from here in here you can see we have placeholder but we will change it to material because material app is our starting point for the application now enter this material app let&#39;s talk about the theme if you are confused or if you don&#39;t know what this variable is you just have to hover over it and this is a theme data type of variable which requires theme data so let&#39;s try to pass theme data over here and inside you can see we have lot of properties at the top we will see each of them in a few minutes remove the constant error will be gone now inside this press control space and you will have a list of values which you can add inside this theme data you can see at the top we have action icon theme app bar theme background color batch theme better theme bottom ever theme bottom sheet theme and list is keep on going so this means that using this theme data we can create and customize every type of theme we required in our application right but how we can use a dark theme and how we can make sure that when the system theme is going to be changed our theme should be changed right away so basically this default theme is the light theme when we are not going to provide anything default theme will be used but when we are going to provide anything inside this theme it will be treated as a light Theme by default so let me just first show you we have a theme mode so when we are going to set this theme mode to theme mode dot you can see we have we have dark mode light mode and system mode by clicking on the system mode now automatically flutter will detect the theme of the system and will apply the theme on your application if you want to keep it light light is by default but if you want to keep it dark you just have to pass dark over here and it will be dark Theme by default okay so let&#39;s keep it for the system we know that this theme is the light theme and for the Dark theme we have to provide Dark theme same it requires theme data and by this way we have a light theme then we have a dark theme and then we have already defined which theme mode we are going to use okay now when you hover over this theme data you can see we have lot of properties that we can change we can change card color canvas color brightness color scheme divider color disabled hint over primary colors and list is keep on going we can change each and everything inside it we can change complete themes of buttons app bar each and everything can be defined over here so let&#39;s say if I am going to Define all the properties right over here our this application is going to be very messy our this class is going to be very large let&#39;s say I&#39;m going to add a text theme which we will create in few minutes but let&#39;s just take an example create a text theme now inside this text theme you can see we have lot of other options that we can add titles subtitles labels headings body caption and a bunch of other things so if I am going to add a body large theme and I have to hover over this and by this I can see that I have to provide textile so let&#39;s say I&#39;m going to create a textile and by this way I first have to add all the text themes it&#39;s very difficult to manage everything over here on the screen first we have to manage it for the light mode which itself is challenging but then we again have to create everything for the dark mode we know that dark theme requires theme data so we can create some other class or we can create a function which returns theme data and we can easily put it right over here to make our code clean and definitely reusable and again theme which is light theme requires theme data so we can again pass the same thing to this so let&#39;s create something custom let&#39;s keep these three properties as it is and let&#39;s go to utils so we created this folder structure in the previous tutorial and in the themes let&#39;s create a new class theme dot dot hit enter and first of all import material Library okay you&#39;ve created a simple class and its name is t app Theme whenever I&#39;m going to create in upcoming videos custom functions custom classes I will use T as a capital letter or a starting point for any custom widget so if you are going to use this code you just have to call T and all the custom widgets and classes will be right in front of you so you can change this name it&#39;s all up to you the app Theme know that if we want to make sure that this theme Constructor is not going to be used again and again so just add underscore which means a private sign and that&#39;s it now it&#39;s Constructor is private because Constructor is private we have to now create static functions so that we can easily call them using TR theme dot name of the function so what we want to return return theme data because light and dark modes require theme data so our function should return theme data name of the function is let&#39;s say light theme okay now here are two things that you can do you can create function like this which will return theme data on the other hand instead of creating a function the easy thing is you just have to create a variable of team data which would be static so that we can easily call it now this theme data is going to return theme data of our choice right so we have light theme control D to duplicate and now we have to change this to Dark theme so we have two theme slide theme and dark theme now we can easily call these themes in the main.dart in here you just have to write TF theme dot this is the light theme so I will pass the light theme over here and then for the Dark theme simply copy and paste it over here changes to large theme at the top you can see we have to import it using the package and once imported you can use it right over here okay once both like to log themes are added okay now let&#39;s try to add entries in the live theme first of all we as we&#39;re going to use the material design 3 so we have to pass use material design three to two next we can add font family which we already added in the previous story so we just have to pass the name of the font family which is Poppins and very important thing for the light theme is the brightness because without the brightness our theme will not be able to understand that is this Constructor is going to be a light one or the dark one so we have to cross the brightness as brightness dot light this means that it&#39;s going to be light mode then we can also add primary color for now I&#39;m just going to add blue but in the next video we will first create all the constants in here in the constant we will add all the colors so we will not be using this these colors but we will use their primary color which is mentioned inside our constraints throughout our application secondary accent different type of other colors so we will create everything related to constant device format is in the next video and next let&#39;s press Ctrl space and you can see we still have lot of options but now we want to create a text theme for the light mode and again the text theme for the dark mode so on dark mode is selected our text should be in the white color and the light mode is selected our text should be in the dark color right so to create a text theme again we have two options we will start creating everything inside this class the class we have over here everything like you can say text theme chip theme app bar theme check box theme bottom sheet and the list is keep on going so again the code will become messy so that&#39;s again a not good practice so one more thing that I&#39;m missing over here is creating a scaffold background color because scaffold is treated mostly as a different screen so by adding a scaffold color you decide that what scaffold color you are using so it&#39;s the light theme and I&#39;m going to use background as a white now again to create a text theme you can see we just have to pass text theme to this property and you hover over it and you can see we have to pass text theme the same process for both light and dark modes so let&#39;s go to theme folder create a new package custom themes inside create a new file name a text theme dot Dart hit enter and using the same property you first have to add the material design material Dot and next we have to create a class I&#39;m going to name it t text theme its Constructor is again going to be private and now we have to follow the same process it should be static it should return text theme and name of it will be light text theme okay now to create a dark mode just press Ctrl D change this light to dark and now we have light tech Sim and dark texting let&#39;s head back to theme property and instead of theme so first I have to import this one then you have to call ttex theme dot light text theme okay for the dark mode let me just copy all the properties we want to use material design 3 for the dark mode same font family brightness will be dark light for the light theme dark for the Dark theme primary color will be same blue then scaffold background color is going to be black and definitely for the text theme we are going to pass dark text theme and over here we have a light texting let&#39;s head back to text theme and first we want to learn how to add text theme okay inside the text theme when you press Ctrl space to see all the properties you can see we have different values body body large medium small then we have button caption display sizes these headlines headline one two three four five six are obsolete do not use this one instead use headline large headline medium headline small then we have labels over line then subtitle one and two is again obsolete then we have title large title medium and title small so it&#39;s again a your choice how you can customize you can use two to three text team Properties or you can create more than two to threes so let&#39;s say we we want to create a headline as you can see on your screen this title is using headline large so we have to create headline launch property when you hover over it on the headline now you can see it&#39;s a textile so we have to pass textile now again in here we have two options when you hover over this you can see we have all the properties listed over here to create everything from scratch and another option is to next to this Constructor use Dot and call the copy with method and now inside this copy with method you have to pass everything like font size color whatever you want to pass over here what this is going to use is this is not going to create a new Constructor but this is going to copy the default values as well as the values we are going to change so first of all let&#39;s pass font size this is going to be have 32 font size next we are going to assign font fade as bold then let&#39;s assign a color because it is a light theme we are going to use the dark color because we don&#39;t have colors yet so let&#39;s say the black color again when we&#39;re going to create colors and font sizes we will not use the static values we will definitely call the values from these constants so for now for this example let&#39;s keep it this way when you have this line you have to add a constant press Ctrl d change this headline large to headline medium and in here you just have to change your fonts settings whatever you want to use I want to use headline medium s24 it will not be bold it will be medium bold so w 600 let me just show you so you have bold normal these are the weights of the bolt till 900 so it&#39;s up to you which you want to use so w600 is a medium bold color will be black so by this way you can create all the values and let me just copy it and paste it for the dark mode when the background is dark we definitely want to use the white color you can see font size properties are same font sizes same font weight is same because we don&#39;t want to change these things it will not look professional because we when we have different values on the light mode and different values in the dark mode it will not do good we will just change the colors to make it visible okay let me just quickly add all the values okay here I&#39;ve just created some of the text themes that we&#39;re going to use in our application for the e-commerce app we have three type of headlines we have three type of titles three type bodies and two type of labels same for the light and dark ports you can see the font size are same for both light and dark modes font weights are same we just have changed these colors if you want this code you can get it from the coding with t okay next as we have created a text theme our text theme is completed the next thing that we want to create is elevator button theme which requires elevated button theme data so it&#39;s all up to us we can pass values over here and again we can create a new class let me just create new class quickly okay here you can see a faded elevator button theme and a custom elevated button theme class for both light and dark modes so let&#39;s go to the class in here the name of the class is T elevator button theme the same way we have created text theme so again we have two type of instances over here the first one for the light and second one for the dark for the light mode as it requires elevator button theme data so we have to create elevation button theme and use the style property to style our button because it is a primary button it will have a blue button background and white text for both light and dark modes if you want to change it you can just have to change the values for the lock dark and light mode over here so again we will not use these colors.void colors.blue but instead we will use all the colors and values from the constraints so for now elevation 0 is going to remove the height foreground color is the color which is on the front which is the color of the text which is a foreground color and background color is the background color of our button which is the blue color then we have disable foreground color disable background color if in case we don&#39;t want to use that button so when the button is going to be disabled this color is going to be applied then we have sides which is a border past the Border Side pass its colors you can add further values stroke align style and width for the Border then we have padding textile and shape of our button for both light and dark modes using the same Technique we will create outline button again here you can see on the left side I have created multiple themes so first of all let&#39;s talk about the app bar theme so ever theme is for both light and dark modes app bar will have no elevation Central title will be false scroll under elevation is again going to be false background color will be transparent surface color is again going to be transparent icon colors are going to be black and each icon color will have this size again these all colors and sizes are not exactly what we are going to use in our project so if you are going to watch the next tutorial I will make sure that I am going to add all the constraints and then definitely all the constraints are going to be assigned this you can get the updated code from the codingwitty.com link is in the description okay once we have both for the light and dark modes let&#39;s check the bottom sheet theme in the bottom Sheep theme again we have light and dark modes bottom shade theme over there Shadow color show drag handle which is the center dot then we have a background color model background color constraints and then definitely we have a shape of the bottom sheet then we have check box now in here what you have to see is when you create create a shape it will be any type of shape but I have created a rounded rectangle border with the Border radius and then next we have a check color so create a check color you have to create a material State Property dot resolve with and if date is selected in short color will be white else color will be black so this is the color of the check which is you can say the icon color then the fill color is again going to use the same technique if the state is selected then the background color will be blue if state is not selected it will be transparent you can create it white you can create it black it&#39;s all up to you so same I have created for the dark mode then for the chip theme this Chip is going to be used as you can see on your screen on product Details page disable color will be gray level style is black selected color is blue padding we have some padding check mark color is going to be white and same we have different theme for the dark mode then we have elevated button Outlet button text field theme so this is going to be a bit long as you can see on the screen we have two type of text themes the one is for the light mode one is for the dark mode error Max lines going to be three we have some large error which we want to display and it can easily contain up to three spaces and prefix icon color suffix I can color ever style is a text so we have to use again the textile dot copy with and then you can pass all the values into error floating label and down below you can see we have border outline border then we have enable border same with with the outline border property Focus border error border and focused error border and then again for the dark mode we have all the values with a different colors and then you already seen to create a text theme let&#39;s remove this test delete it from here and we have no arrow in the code we have created all the type of themes okay never I just have to import all the files over here and then you just have to call or each of them checkbox theme requires a checkbox theme for the light mode bottom sheet elevated outline button import decoration and same all the themes for the dark mode now whenever we are going to use the button we don&#39;t have to pass or we don&#39;t have to design again and again for the button it could be any button same goes for all the themes we have defined and using the same technique you can create action icon theme batch theme better theme bottom app or theme bottom navigation bar theme button bar theme and you can see we have unlimited options over here so you just have to design this by using this technique we can easily copy and paste the themes let&#39;s say you have multiple app bars so you just have to create a folder for the app bar themes and in here you can create different let&#39;s say a transparent type of theme colored app bar theme and bunch of other options you can create over here same we have have buttons so you will create a button folder and create multiple themes and now when you have a large collection of theme and if you want to create some other application and you want to copy this data for some other project you just have to copy this custom themes folder paste it into new application and your application is good to go so that&#39;s it for today&#39;s tutorial I hope you learned something new in this tutorial if you learned something new please like the video and if you&#39;re new to this channel don&#39;t forget to subscribe it and hit the Bell icon to get notified about upcoming videos once again you can get the code from the description below which is the codingwitty.com thank you for watching take care Allah office

Transcript for:Setting Up Themes in Flutter

Transcript for:
Setting Up Themes in Flutter