#Google Flutter - Theme Extensions

hello everyone and welcome back to another flutter tutorial in this video we will see how we can create a theme extension by that I mean you can extend the current theme to include your own clothes your Styles Etc so that you can use it like any other theme that's part of your application so let's start as usual I'll be starting with an empty template I just have an empty container with a white background let's hope now let's look at the basic template that platter has created for us for a new project here we have a theme with a theme data with primary Swatch color as blue so this is basically the light theme and you can have your dark theme as well so I have a hole with an empty container now I'm going to create a new file a class I'm going to call home page let me import them with little package here and let's create a basic a simple layout to demonstrate the theme extensions so let me create a container with a padding of 30 a child with the column and the text which says just hello flutter and a container with a width of 200 and a height of 200 I'm gonna give it a clerk color is going to be colors.green and let me apply a style for the text so that's the theme dot of context which is the inherited widget and I'm gonna access the text theme and body large Style so let me declare a variable failure is equal to false and if it is failure I'm going to change the color of the container to write otherwise it's green and let me declare a new text button which will set which will toggle the failure variable true and false and the text of that button is going to be failure and success placed on the failure Boolean value now let's go to the middle dot file and change the home to the new home page let me give it the alignment some spacing okay yeah so that's walking now let's go to the settings and change the theme to Dark theme and if we come back to the app you can see that nothing has changed because we haven't declared a nothing yet so let's declare a new theme data for the Dark theme and let's change the upper theme background color to colors.let say green when it is dark so right now it's dark and let me copy that to the light theme and make it feel make it constants and if you go back to the settings and change to light theme and come back to the app you can see that the up bar theme has changed to teal now let's I'm setting the theme to The Dark theme to Black and if I go back and change to Dark theme you can see that it immediately changes to Black but how can I declare my own colors I want my own properties to the theme that's not possible Right so if you try to write something like that you will get some error so let's solve that I'm going to create a new file let me say theme.art and I'll move all the themes from the main door Dart to my app team class let me write a private Constructor and I'm gonna I'm gonna declare two variables static final theme data live theme is equal to theme data and similarly Dark theme which is a theme data and I will go to the main.f file and I'll copy the the theme variables and the Styles and paste it in the live theme and dark theme so that I can move the code from the main door dot file to the separate file so that's much cleaner and here I will just say app Theme dot like and app thing dot dark but if you want to write the extensions here you can do that as well so you can just do here extensions and you can write your own extension so you can do that as well but I'll I prefer to write it in a separate file so yeah so we'll just do just change this to a theme dot light and app Theme dot dark okay so let's see if this is working refresh the app okay that's good and if you still want to write your extensions here you can do it with copy with and you can write your extension here so that's on the way now let's go back to the theme.file and we are going to write our extensions here like this okay so let's start by creating a new file I'm going to create a new folder extensions and create a new file I'm going to name it my colors my colors.dart and create a new class my colors extends theme extensions and give it the same type and let's override two methods first is the copy width and second one is the love I'm gonna make it immutable and create a Constructor to keep to keep this simple I'm gonna declare two variables success and failure and we need to pass it in the Constructor required success and required failure and in the copy with method I'm gonna pass the two variables color success and color failure now let's return the my color here and let's pass the success and failure here great okay now let's go to the love method so the love method is used to interpolate between two values so if it is not our my color let's return the just return this otherwise let's return my colors and do the interpolation colors dot Loop with success failure and pass in the double value and similarly for failure and that's it and let's override one more method and if you go on really want to print out the the values you can use this using two string so I'm gonna return my close and print out the success and failure colors here so if you call to string it's going to return this value now let's write couple of methods to make things easy that's called light and I'm gonna return a couple of default values which will be used when the app is in the light theme for success and failure and similarly for the Dark theme let me change the failure color to something similar to red when it is a live theme and when it is in the dark theme you're going to change the colors to something like this and failure as well something similar to Gray so that's the default colors for light and theme and in the app theme in extensions you're gonna call constant theme extension and pass in the dynamic because if you want to write more than one uh payment extension you can use that so it's an array similarly for the Dark theme that will be my colors.dark okay great now let's see how we can use this inside our app so here you can see I have used body large for the text right and you know that you can customize it so in the light theme I can write text theme constant theme and I can override the body large Style with my own style I'm going to say colors.red for light and a font size or let's say 20 and similarly when it is dark and if if I'm using the body large theme it's going to be in purple color okay let's see if that works yeah it stains to flutter because sorry it stays too purple because we are in bhakti and when it is light theme it should change to red right yeah that's how the default theme works you can override the default themes but here we are writing our own extensions right so let's use our own extension so finally my colors is equal to I am going to use theme dot off context dot extension and I'm going to pass in my colors and unwrap it so it's that easy my colors.success sorry my colors dot failure and it will be my colors.success so that's how easy it is now so now my colors is part of the theme itself right I can use it as part of the theme I can change the colors so whatever I want right so here if I I can change the colors the default colors as well right so when the user changes to dark and light theme it will change accordingly so if I change so the dark kind of red changes in the light theme and if I change that to uh this color for the Dark theme pillar let's see if that works and if I refresh and if I go ahead and change to Dark theme and if I come back to the app and when it is failure you see this color you can see if I refresh right and if I if it is failure you can see the other color so now my extension is part of the theme itself so it's a part of it's a part of the theme it's an extension of the theme so now my color is actually an extension of the theme itself so that's how useful it is so so now you don't have to write the colors outside the theme and include it in your UI or you can write you don't have to write the themes or sorry the Styles outside now everything is part of the theme and you can access it using theme dot off context so that will be much cleaner and very easy to write and use right so so if you want to use the theme extensions here you can write like this theme extension and dynamic and you can pass in your list of theme extensions here that will be part of the theme itself and you can access it like theme dot of context and similarly you can do it for the Dark theme right so now we are accessing the the Dark theme of the system the default theme itself and you can copy with you can extend that theme as well if you want so it's that easy it's so convenient so yeah much cleaner so this extensions were included that it came with the flutter three so they're much useful and it makes the code much cleaner and much maintainable so yeah very useful feature so if you like the video please don't forget to like subscribe and share and thanks for watching and see you in the next video bye

Channel: Mobile Programmer

Views: 3,040

Keywords: Flutter, Google, Android, iOS, Tutorials, Code, Study code, SQLite, Cross Platform, Dart, Null Safety, Flutter. dart, theme_extensions

Id: 7lFIDCnK6Dg

Length: 13min 35sec (815 seconds)

Published: Fri Dec 16 2022