Creating Custom Theming in Flutter Apps | Styling Flutter widgets based on Theme Data

managing teams within Alpha trap might be quite tricky and confusing and it requires a lot of effort from the developers in order to override the existing color scheme as well as the theme data but theming also comes with lot of advantages while working with custom themings for light and dark modes therefore in this video I will try to look into the theme with a single example using elevated button widget we want to explain the entire flutter theming Concept in a single video may not be sufficient enough hence in this video to keep it very simple we try to make use of a single elevator button widget wherein we override the existing color scheme as well as the theme data with our own custom stylings so this same technique can be broadly applied to all flutter wedges of your choice hence without any further delay as deadly dive into the video and get started our home points to my home page here in my home page we have a single elevated button placed right at the center so with flutter which uses material 3 theme whenever you try to create an elevated button widget you get this simple elevator button with no fancy stylings and this simple button styling may not be suitable for our lives therefore let's try to create some fancy stylings for this elevated button widget here in the Styles let's try to define the same background color the height and width for the button as well as the text Style Now by applying custom styling we can configure the elevator button Styles this styling actually applies the single elevator button widget now if we try to create a second elevator button right below it it actually goes to taking the default theme and we cannot go for adding styling for each and every button which is which is being used in this app therefore in order to avoid this boilerplate the only thing which you can do is you can go for overriding the exiting theme styles of the elevator button somewhere in your theme data and it applies globally across all screens in a flutter app therefore let's try to create our own custom Theme by overriding the theme data and what we are trying to achieve is we are trying to override the existing button theme wherein we don't need to specify stylings separately for each and every button widget whenever you try to create a elevated button the default theme will override with the custom theming Styles and this will update globally for all elevator button across the flat wrap here let's create a separate file called theme data where we override the existing theme data with the custom stylings let's try to create a class called theme class wherein we specify the colors for light and dark modes and here inside this theme class let's create a static method called theme data where we make use of the material 3 theme and let's try to focus on overriding the elevated button theme alone and in order to override the elevator button team we make use of the elevator button theme data and here inside this is where we need to apply our own custom styling first starting with the style let's try to set the height and width for our elevator button where I have specified the width double dot Infinity which is the maximum width it can take and specify the height as 55 followed by which is try to specify the background color where it takes the light primary color which has been defined over here following the background color let's define the shape where it takes the rounder rectangular border with a specified border radius finally the textile actually applies to the button text where I have specified the button text with the font size of 23 and the foregone color is nothing but the texture style color inside the button so this is a simple example of overriding the existing background or foreground color as well as the text style for the elevator button widget this is basically for the light theme and the same goes for the Dark theme as well for the Dark theme we just try to make the same stylings for this example now as we have specified separate stylings for light and dark theme we need to specify them in the main method therefore we'll set over to the main data file here instead of the default theme data let's try to specify your own custom theme therefore for the theme it is going to be the then class dot light theme similarly for the Dark theme we need to specify the teamclass.dog theme now if we restart our app you will notice that we haven't applied any custom styling for the celebrated button widget since we are overrated the existing theme data of the elevated button widget it applies globally to all elevator button widgets across our flat trap so this is one simple example where we have override the existing theme data of the elevated button widget this technique can be broadly applied to any flutter widgets of your choice therefore you can go for adding your own custom styling for any of your sweater widget thereby you can minimize the buyer pack code hence in this video hope you guys found how to create your own custom theme or override the existing theme data in a flat wrap if you found this video useful consider subscribing and I will see you again in the next one foreign [Music]

Channel: vijaycreations

Views: 7,048

Keywords: flutter, dart, themes, theme, flutter theme, flutter themes, dark mode in flutter, dark mode, theming, dynamic themes, dynamic themes in flutter, device preferences, device theme in flutter, flutter dynamic themes, device theme in flutter apps, how to update theme in flutter based on device preferences, dark theme, light theme, light mode, material theme in flutter, theming in flutter apps, app theme in flutter, themes in flutter app, changing themes in flutter, change themes, app

Id: pdEs7BFl49E

Length: 4min 43sec (283 seconds)

Published: Mon Jun 26 2023