Flutter dark mode switch update#

Flutter dark mode switch update#

The state management tool will be used to notify the change across the widget tree and update the state of the UI. The idea is to create a boolean variable isDarkTheme and when set to true, the theme will change accordingly. Still, you can use any state management solution that you are comfortable with. Within the tutorial, the Provider will be used for its simplicity and wider popularity. Someone who works with Flutter for a while must have heard about state management a couple of times a day at least. Because the MaterialApp widget is on the top of the widget tree, and It can only be re-rendered by completely restarting the application… Adding State with Provider Note: A hot restart is required each time ThemeData class is modified. Let’s change the color of the icon with the primary color. The colors that I have chosen are to visualize the differences between the themes easily, and it is up to you to choose whichever color in your own implementation.īesides, we can even further change the colors of anything with the theme colors. This means that defining every UI-related property in the ThemeData will keep the UI consistent and effortless throughout the project. The beauty of this widget is that it can be customized in a variety of ways from textStyle to check boxes. This concept is designed by google as a design guideline called Google Material Design and embedded inside Flutter material design by default, which means, even by changing only those two colors you can still create a nice looking theme. accentColorBrightness: Used to determine the color of text and icons placed on top of the accent color.īasically, the primary color is used in AppBar and the accent color (which is the second color) is used in FloatingActionButton.accentColor: secondary color used within the app e.g.scaffoldBackgroundColor: background color for all the scaffolds.primar圜olorBrightness: Used to determine the color of text and icons placed on top of the primary color.primarySwatch: This property acts as the primar圜olor, and further it uses different shades of the given color in different areas.primar圜olor: The main color that is going to be used inside the app.

brightness: Defines the default textStyle color for the text.In this example, we are going to cover the most important ones. ThemeData class comes with tons of properties that can be customized to create a unique theme for the applications. ScaffoldBackgroundColor: ey,ĪccentColorBrightness: Brightness.light) įinal ThemeData themeDataDark = ThemeData( Inside the lib folder, create a new file called theme_data.dart.įinal ThemeData themeDataLight = new ThemeData( This also means that you can create and implement multiple themes on your own once you create, define and customize a theme under ThemeData class.įor this reason, let’s create themeData classes to create light & dark themes. So in general, we are going to create a logic that when pressing a button, we are going to run a boolean function that says if the theme is dark then use themeData for dark theme, if not use themeData for light theme. This class has all the properties that can be customized to create an overall theme for the applications from text styles to variety of colors. Theme property takes one argument that is a ThemeData class. ThemeData classĭefines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app.įlutter handles the overall theme of the app under theme property in MaterialApp widget. In the next step, we will implement functionalities one by one.

Now go ahead and replace the MyHomePage widget with DarkThemePage inside MaterialApp in main.dart. MainAxisAlignment: MainAxisAlignment.center,

Class DarkThemePage extends StatefulWidget createState() => _DarkThemePageState() Ĭlass _DarkThemePageState extends State build(BuildContext context) ),