Chào các bạn, trong một dự án Mobile app hay Web, việc cấu hình Theme cho dự án là 1 trong những bước đầu tiên khi xây dựng một dự án ban đầu. Hôm nay, mình sẽ cùng nhau tìm hiểu cách cấu hình Theme theo chuẩn Material 3.
Hiểu cơ bản về Theme
Theme là những màu sắc của các component, độ sáng tối, tương phản, đổ bóng, độ đậm nhạt,.. của một ứng dụng hoặc trang web.
Theme giúp bạn nhất quán thiết kế của một ứng dụng, website. Nó cho phép bạn tùy chỉnh tất cả các khía cạnh thiết kế của dự án để đáp ứng các nhu cầu cụ thể của doanh nghiệp hoặc thương hiệu.
Có rất nhiều hệ thống design systems hỗ trợ cho việc định nghĩa 1 Theme cho ứng dụng, trong đó phổ biến nhất có thể kể đến:
…
Để nói về Theme hoặc Design Systems thì đó là cả một lĩnh vực trong thiết kế. Tuy nhiên trong phạm vi bài viết, hôm nay mình chỉ tìm hiểu cơ bản và cách cấu hình Theme cho dự án Flutter bằng Material UI 3. Let’s go!!!!
Những bước đầu tiên.
Các thành phần chính bao gồm: Color, Elevation, Icons, Motion, Shape, Typography. Trong phạm vi bài viết này thì mình sẽ tập trung vào Color và Typography nhé.
Key Colors
Key colors tập hợp 5 màu chủ đạo với 13 tông màu khác nhau
Accent colors:
- Primary key color (màu sơ cấp): màu chính được sử dụng trong các thành phần nổi bật của ứng dụng như FAB, các nút CTA, các component chính của ứng dụng.
- Secondary key color (màu thứ cấp): được sử dụng ở những component ít nổi bật hơn như Filter Chip.
- Tertiary key color (màu bậc 3): được sử dụng để cân bằng 2 màu chính phụ hoặc mang lại sự chú ý cho 1 chi tiết nào đó trong component.
Neutral colors
- Neutral key color (màu chủ đạo trung tính): thường được dùng để định nghĩa màu cho background, text hoặc icon cần độ nhấn mạnh cao.
- Neutral variant key color: text, icon với độ nhấn trung bình, outline button,..
Còn các thành phần mở rộng nữa thì các bạn có thể tham khảo docs này nhé: https://m3.material.io/styles/color/the-color-system/key-colors-tones
Material Theme Builder
Mình có thể dùng công cụ hỗ trợ Material Theme Builder của Google để tạo 1 theme theo chuẩn Material cơ bản bằng cách chọn màu chủ đạo thì tool sẽ tự tạo bộ Color Palette.
Ngoài ra các bạn có thể tham khảo thêm Material 3 UI Kit định hình các component sử dụng.
Cấu hình theme cho Flutter
Ở đây mình dùng GetX để hỗ trợ cho việc tạo theme cũng như quản lý state (ngoài ra có thể dùng bloc, Provider… tùy vào sở thích nhé).
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
Mình có thể dùng cơ bản như thế này thì có thể tạo 1 theme chuẩn Material3 cho ứng dụng.
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> |
Tuy nhiên nếu các bạn có tùy chỉnh thêm thì cũng có những config sau theo chức năng mong muốn:
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> |
Hoặc có thể tạo 1 file color scheme (đoạn code này mình thao khảo blog nào đó nhưng quên tên rồi 🥲).
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
Các bạn cũng có thể cấu hình các thuộc tính cho Text bằng cách này.
Nhớ Import vào DAppTheme để sử dụng nhé
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> |
Cách sử dụng
Có thể đơn giản sử dụng như sau:
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 và Light Mode.
Để chuyển đổi giữa dark mode và light mode thì chúng ta tạo 1 nút switch. Để lưu giá trị theme khi khởi động lại ứng dụng thì bạn có thể dùng shared_preferences để lưu biến trong local storage nhé.
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> |
Lời kết
Qua bài viết vừa rồi, chúng ta đã cấu hình Material Theme cho dự án Flutter. Hẹn gặp các bạn ở bài viết tiếp theo nhé. Năm mới 2023, chúc mọi người vui vẻ, ngày càng thành công trong công việc, cuộc sống nhé. Chúc mừng năm mới
Source code
https://github.com/AnhQuangCee/demo_theme