Dynamic Theme switching in Flutter | Theming Explained | Light and Dark modes in Flutter app

foreign [Music] basically themes can be broadly classified under light theme or the dog theme and in order to manage themes within our filter app we try to have a switch button anywhere in a filter application and we try to toggle that usage between light beam and the dog theme but that is yet another way like you can make use of the system preferences and update a flatter theme accordingly or in other words our fat wrap should be smart enough to read the system preference either it is going to be a light theme or dark theme and make our UI dress up accordingly in this video we will try to address the second approach where we make of a trap to read the system preferences and update its UI for the light theme of the dog Theme by doing so we eliminate the boiler paid for man in the state separately for light them or dog theme rather we can simply specify the team data right at the top of the widget tree inside the material app and the flatter will do the rest of rendering process all by itself and what we have here is a simple example of the same where if you have a basic counter exam lab and it is in that light Theme by default and if you ingest go to the system preferences and change it to Dark theme and now if I get back to our counter example app it automatically switches to the doc theme we aren't writing any coding for management States rather the flutter has intelligently determined the system preferences and I switched from light theme to The acting and with just few lines of code we'll be able to achieve this in our flat round hope you got a better understanding of what we are about to discuss in this video with this idea without any further delay let's directly jump into the coding part and get this done first let's start by creating a flutter project and we can make use of the shortcut key which is shift command and P try to search for flutter and select new flutter project it provides with few templates like it is going to be back as a Plugin or module or a simple flutter application you can just choose the basic flat wrap after specifying the path you can provide the name for your flutter project let me name it as the map now we have our basic counter flutter exam lab up and ready and let's try running it now we have a basic counter exam lab here and we'll start with the coding part first let's try to get rid of these commands and if you see here by default inside the material app we have the theme specified that the primary color is given as blue if you change it to Red you see that it applies globally to all screens in a flutter application but this is not something what we are about to discuss here so let's get rid of this and for specifying the themes for light and dark it is going to be very simple you can just specify it as theme data you can make use of the theme data dot like that's it which means that a flat wrap is going to take the light dim no matter what the system preferences or else if you want to have a dark theme for your application you can specify a dark theme and give the theme data as theme data.tar now we have provided values for both theme and dark theme where the theme data is going to be the default one and the default here is the light theme for the Dark theme we have provided the values the theme data and now if I go to system preference and change it to Dark theme and get back to our app you see that a wrap has dynamically switched from light theme to drug theme you can also specify that the mode here light dark or the system you can specify system here and that is yet another thing like if you want to provide your custom color preferences for a light theme or dark theme say for example this Floating Action button color doesn't match with the Dark theme and if you want to provide your own custom color then you can do so by creating a separate team class and listing down all your color preferences there so let's look into how to provide our own custom color preferences font Styles so on so forth for both light theme and log theme and to do so let's create a separate file called themes here in the lib folder now here inside the separate theme file let's start by creating a class and name it as theme class and this class is going to hold pretty much all the color schemes what we are going to use in our header application let's create a separate theme data for both light theme and dark theme since we are going to make use of our own custom Colors Let's Define that here I have a separate color for light theme and separate primary color for Dark theme and few other colors let's start with the light theme and say the light theme let's hit the primary colors the scaffold background color under this color scheme you can make uses a copy with method and provide the primary colors the primary color what we have for the lighting which is a kind of a dark pink color okay that is what we are going to have for the light thing just the same way we can make use of the Dark theme for the theme data we can set the theme data dark and provide this careful background color and another color scheme for the copyright method let's provide the primary color as the dark Teal's primary color now we have provided our custom colors for both light and dark themes now let's head back to the main.f file and here in order to get those changes reflected you need to get rid of this theme default theme data and provide your own custom theme here which is the theme class not light them similarly theme class dot doc thing and if you save you will now notice that color what we have for the app bar by default in the material theme has now changed to some color which is even more dark so this indicates that our tribe is now overriding the existing material theme and applying the color theme what we have provided you can also check by providing your own color themes say for example if I want to change this floating SM button color to Red just in case of Dark theme mode you can provide that here floating hasn't button theme and provide the background color as colors.red Ferry started you now notice that you can see the floating action button has changed to red color but it does not apply to the light theme mode because we haven't specified any Floating Action button Styles here for the lighting and this theme that is not this limited to colors you can also provide your own custom font Styles font family Etc here just the same way you can also customize your button Styles as well here in this team data you can explicitly provide the button themes for elevated button which will globally apply to all screens in your Shutter application so this is how you can manage themes within your federal application and update it dynamically in runtime hope you guys found this tutorial useful if you do so consider subscribing and I will see you in the next one foreign [Music] foreign

Channel: vijaycreations

Views: 19,602

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: b2fqLJ3tiLg

Length: 6min 59sec (419 seconds)

Published: Sat Mar 25 2023