Hi guys, in a Mobile app or Web project, configuring the theme for the project is one of the first steps when building an initial project. Today, I will learn together how to configure the Theme according to the Material 3 standard.
Basic understanding of Theme
Themes are the colors of the components, brightness, contrast, shadow, density, .. of an application or website.
Theme helps you consistent design of an application, website. It allows you to customize all design aspects of your project to meet the specific needs of your business or brand.
There are many design systems that support the definition of a Theme for an application, the most popular of which are:
…
To talk about Theme or Design Systems is a whole field in design. However, within the scope of the article, today I only learn the basics and how to configure the Theme for Flutter project using Material UI 3. Let’s go!!!!
First steps.
The main components include: Color, Elevation, Icons, Motion, Shape, Typography. Within the scope of this article, I will focus on Color and Typography.
Key Colors
Key colors is a collection of 5 main colors with 13 different tones
Accent colors:
- Primary key color: primary color used in app highlights like FAB, CTA buttons, key app components.
- Secondary key color: used in less prominent components like Filter Chip.
- Tertiary key color (3rd color): used to balance 2 primary colors or bring attention to a detail in a component.
Neutral colors
- Neutral key color: often used to define a color for a background, text or icon that needs high emphasis.
- Neutral variant key color: text, medium press icon, outline button,..
For additional components, you can refer to this docs: https://m3.material.io/styles/color/the-color-system/key-colors-tones
Material Theme Builder
I can use Google’s Material Theme Builder support tool to create a theme according to the basic Material standard by choosing the main color, the tool will automatically create a Color Palette.
In addition, you can refer to the Material 3 UI Kit to shape the components used.
Configure themes for Flutter
Here, I use GetX to support theme creation as well as state management (in addition, you can use block, Provider … depending on your preferences).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:get/get.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'theme_config/theme.dart'</span> <span class="token punctuation">;</span> <span class="token comment">// import theme config</span> <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token class-name">MyApp</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token class-name">Key</span> <span class="token operator">?</span> key <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> key <span class="token punctuation">:</span> key <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token metadata symbol">@override</span> <span class="token class-name">Widget</span> <span class="token function">build</span> <span class="token punctuation">(</span> <span class="token class-name">BuildContext</span> context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token class-name">GetMaterialApp</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token string">'Flutter Demo'</span> <span class="token punctuation">,</span> theme <span class="token punctuation">:</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">.</span> lightTheme <span class="token punctuation">,</span> <span class="token comment">// Light theme nè.</span> darkTheme <span class="token punctuation">:</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">.</span> darkTheme <span class="token punctuation">,</span> <span class="token comment">// Dark theme nè.</span> themeMode <span class="token punctuation">:</span> <span class="token class-name">ThemeMode</span> <span class="token punctuation">.</span> system <span class="token punctuation">,</span> <span class="token comment">// Theme mode ở đây mình đặt theo hệ thống.</span> home <span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">MyHomePage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Color Theme
I can use this basic, then I can create a standard Material3 theme for the application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'text_theme.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">{</span> <span class="token comment">// Light theme</span> <span class="token keyword">static</span> <span class="token class-name">ThemeData</span> lightTheme <span class="token operator">=</span> <span class="token class-name">ThemeData</span> <span class="token punctuation">(</span> brightness <span class="token punctuation">:</span> <span class="token class-name">Brightness</span> <span class="token punctuation">.</span> light <span class="token punctuation">,</span> textTheme <span class="token punctuation">:</span> <span class="token class-name">DTextTheme</span> <span class="token punctuation">.</span> lightTextTheme <span class="token punctuation">,</span> <span class="token comment">// chỗ này mình sẽ config text theme</span> fontFamily <span class="token punctuation">:</span> <span class="token string">'Quicksand'</span> <span class="token punctuation">,</span> useMaterial3 <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token comment">// Nhớ để biến này thành true để dùng Material3 nhé</span> colorSchemeSeed <span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xFFF55050</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// màu chủ đạo của ứng dụng </span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Dark theme</span> <span class="token keyword">static</span> <span class="token class-name">ThemeData</span> darkTheme <span class="token operator">=</span> <span class="token class-name">ThemeData</span> <span class="token punctuation">(</span> brightness <span class="token punctuation">:</span> <span class="token class-name">Brightness</span> <span class="token punctuation">.</span> dark <span class="token punctuation">,</span> textTheme <span class="token punctuation">:</span> <span class="token class-name">DTextTheme</span> <span class="token punctuation">.</span> darkTextTheme <span class="token punctuation">,</span> fontFamily <span class="token punctuation">:</span> <span class="token string">'Quicksand'</span> <span class="token punctuation">,</span> useMaterial3 <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> colorSchemeSeed <span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xFFF55050</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
However, if you have more customization, there are also the following configs according to the desired function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | cardColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> primaryColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> red <span class="token punctuation">,</span> primaryColorLight <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> primaryColorDark <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> canvasColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> shadowColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> scaffoldBackgroundColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> bottomAppBarColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> dividerColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> focusColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> hoverColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> highlightColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> splashColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> selectedRowColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> unselectedWidgetColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> disabledColor <span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xFFF1F1F1</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> secondaryHeaderColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> dialogBackgroundColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> indicatorColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> hintColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> errorColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> green <span class="token punctuation">,</span> toggleableActiveColor <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">,</span> |
Or you can create a color scheme file (this code I refer to a certain blog but forgot the name 🥲).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta50 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xfffcd5ce</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta100 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xfffaac9d</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta300 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xfff8836c</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta400 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xfff65a3b</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta900 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xfff4310a</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customMagenta600 <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xffc32708</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customErrorRed <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xFFC5032B</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customSurfaceWhite <span class="token operator">=</span> <span class="token class-name">Color</span> <span class="token punctuation">(</span> <span class="token number">0xFFFFFBFA</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token class-name">Color</span> customBackgroundWhite <span class="token operator">=</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> white <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">DColorSheme</span> <span class="token punctuation">{</span> <span class="token keyword">static</span> <span class="token keyword">const</span> <span class="token class-name">ColorScheme</span> lightColorScheme <span class="token operator">=</span> <span class="token class-name">ColorScheme</span> <span class="token punctuation">(</span> primary <span class="token punctuation">:</span> customMagenta50 <span class="token punctuation">,</span> primaryContainer <span class="token punctuation">:</span> customMagenta600 <span class="token punctuation">,</span> secondary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> amber <span class="token punctuation">,</span> secondaryContainer <span class="token punctuation">:</span> customMagenta400 <span class="token punctuation">,</span> surface <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> purpleAccent <span class="token punctuation">,</span> background <span class="token punctuation">:</span> customSurfaceWhite <span class="token punctuation">,</span> error <span class="token punctuation">:</span> customMagenta900 <span class="token punctuation">,</span> onPrimary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> red <span class="token punctuation">,</span> onSecondary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> deepOrange <span class="token punctuation">,</span> onSurface <span class="token punctuation">:</span> customMagenta300 <span class="token punctuation">,</span> onBackground <span class="token punctuation">:</span> customMagenta100 <span class="token punctuation">,</span> onError <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> redAccent <span class="token punctuation">,</span> brightness <span class="token punctuation">:</span> <span class="token class-name">Brightness</span> <span class="token punctuation">.</span> light <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">const</span> <span class="token class-name">ColorScheme</span> darkColorScheme <span class="token operator">=</span> <span class="token class-name">ColorScheme</span> <span class="token punctuation">(</span> primary <span class="token punctuation">:</span> customMagenta50 <span class="token punctuation">,</span> primaryContainer <span class="token punctuation">:</span> customMagenta600 <span class="token punctuation">,</span> secondary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> amber <span class="token punctuation">,</span> secondaryContainer <span class="token punctuation">:</span> customMagenta400 <span class="token punctuation">,</span> surface <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> purpleAccent <span class="token punctuation">,</span> background <span class="token punctuation">:</span> customSurfaceWhite <span class="token punctuation">,</span> error <span class="token punctuation">:</span> customMagenta900 <span class="token punctuation">,</span> onPrimary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> red <span class="token punctuation">,</span> onSecondary <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> deepOrange <span class="token punctuation">,</span> onSurface <span class="token punctuation">:</span> customMagenta300 <span class="token punctuation">,</span> onBackground <span class="token punctuation">:</span> customMagenta100 <span class="token punctuation">,</span> onError <span class="token punctuation">:</span> <span class="token class-name">Colors</span> <span class="token punctuation">.</span> redAccent <span class="token punctuation">,</span> brightness <span class="token punctuation">:</span> <span class="token class-name">Brightness</span> <span class="token punctuation">.</span> light <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Text theme
You can also configure properties for Text in this way.
Remember to Import into DAppTheme to use it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'text_theme.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'color_sheme.dart'</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">{</span> <span class="token comment">// Light theme</span> <span class="token keyword">static</span> <span class="token class-name">ThemeData</span> lightTheme <span class="token operator">=</span> <span class="token class-name">ThemeData</span> <span class="token punctuation">(</span> textTheme <span class="token punctuation">:</span> <span class="token class-name">DTextTheme</span> <span class="token punctuation">.</span> lightTextTheme <span class="token punctuation">,</span> <span class="token comment">// Text theme</span> colorScheme <span class="token punctuation">:</span> <span class="token class-name">DColorSheme</span> <span class="token punctuation">.</span> lightColorScheme <span class="token punctuation">,</span> <span class="token comment">// tùy biến bằng bộ màu mong muốn</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Dark theme</span> <span class="token keyword">static</span> <span class="token class-name">ThemeData</span> darkTheme <span class="token operator">=</span> <span class="token class-name">ThemeData</span> <span class="token punctuation">(</span> textTheme <span class="token punctuation">:</span> <span class="token class-name">DTextTheme</span> <span class="token punctuation">.</span> lightTextTheme <span class="token punctuation">,</span> colorScheme <span class="token punctuation">:</span> <span class="token class-name">DColorSheme</span> <span class="token punctuation">.</span> darkColorScheme <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Using
Can be simply used as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token metadata symbol">@override</span> <span class="token class-name">Widget</span> <span class="token function">build</span> <span class="token punctuation">(</span> <span class="token class-name">BuildContext</span> context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> theme <span class="token operator">=</span> <span class="token class-name">Theme</span> <span class="token punctuation">.</span> <span class="token function">of</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token class-name">Scaffold</span> <span class="token punctuation">(</span> body <span class="token punctuation">:</span> <span class="token class-name">Column</span> <span class="token punctuation">(</span> children <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">const</span> <span class="token class-name">SizedBox</span> <span class="token punctuation">(</span> height <span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token class-name">Text</span> <span class="token punctuation">(</span> <span class="token string">'Hello Material 3'</span> <span class="token punctuation">,</span> style <span class="token punctuation">:</span> theme <span class="token punctuation">.</span> textTheme <span class="token punctuation">.</span> headlineLarge <span class="token punctuation">,</span> <span class="token comment">// dùng theme cho Text</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token class-name">Text</span> <span class="token punctuation">(</span> <span class="token string">'Subtitle'</span> <span class="token punctuation">,</span> style <span class="token punctuation">:</span> theme <span class="token punctuation">.</span> textTheme <span class="token punctuation">.</span> subtitle1 <span class="token punctuation">,</span> <span class="token comment">// dùng theme cho Text</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token class-name">Container</span> <span class="token punctuation">(</span> padding <span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span> <span class="token punctuation">.</span> <span class="token function">symmetric</span> <span class="token punctuation">(</span> horizontal <span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> child <span class="token punctuation">:</span> <span class="token class-name">Row</span> <span class="token punctuation">(</span> mainAxisAlignment <span class="token punctuation">:</span> <span class="token class-name">MainAxisAlignment</span> <span class="token punctuation">.</span> spaceBetween <span class="token punctuation">,</span> children <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token class-name">Text</span> <span class="token punctuation">(</span> <span class="token string">"Dark mode"</span> <span class="token punctuation">,</span> style <span class="token punctuation">:</span> theme <span class="token punctuation">.</span> textTheme <span class="token punctuation">.</span> bodyMedium <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Dark Mode and Light Mode.
To switch between dark mode and light mode, we create a switch button. To save the theme value when restarting the application, you can use shared_preferences to save the variable in local storage.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token class-name">Switch</span> <span class="token punctuation">(</span> value <span class="token punctuation">:</span> <span class="token class-name">Get</span> <span class="token punctuation">.</span> isDarkMode <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token comment">// vì dùng stateless nên mình để tạm điều kiện như này nhé</span> activeColor <span class="token punctuation">:</span> theme <span class="token punctuation">.</span> colorScheme <span class="token punctuation">.</span> primary <span class="token punctuation">,</span> onChanged <span class="token punctuation">:</span> <span class="token punctuation">(</span> bool value <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// GetX có hàm changeTheme để hỗ trợ cho việc chuyển đổi light - dark</span> <span class="token class-name">Get</span> <span class="token punctuation">.</span> isDarkMode <span class="token operator">?</span> <span class="token class-name">Get</span> <span class="token punctuation">.</span> <span class="token function">changeTheme</span> <span class="token punctuation">(</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">.</span> lightTheme <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token class-name">Get</span> <span class="token punctuation">.</span> <span class="token function">changeTheme</span> <span class="token punctuation">(</span> <span class="token class-name">DAppTheme</span> <span class="token punctuation">.</span> darkTheme <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> |
Epilogue
Through the last article, we have configured the Material Theme for the Flutter project. See you in the next article. Happy New Year 2023, wish everyone a happy, more and more successful in work and life. Happy New Year
Source code
https://github.com/AnhQuangCee/demo_theme