2.1 主题配置（明亮、黑暗）

2.1 主题配置（明亮、黑暗）

主题样式配置，实现步骤：

第 1 步：下载颜色配置

https://material-foundation.github.io/material-theme-builder/#/custom

img

吸取设计稿中的主色

img

lib/common/style/lib_color_schemes.g.dart

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import 'package:flutter/material.dart';

const seed = Color(0xFF5F84FF);

const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: seed,
  onPrimary: Color(0xFFFFFFFF),
  primaryContainer: Color(0xFFDBE1FF),
  onPrimaryContainer: Color(0xFF001452),
  secondary: Color(0xFF595D71),
  onSecondary: Color(0xFFFFFFFF),
  secondaryContainer: Color(0xFFDEE1F9),
  onSecondaryContainer: Color(0xFF161B2C),
  tertiary: Color(0xFF74546F),
  onTertiary: Color(0xFFFFFFFF),
  tertiaryContainer: Color(0xFFFFD7F7),
  onTertiaryContainer: Color(0xFF2C122A),
  error: Color(0xFFBA1B1B),
  errorContainer: Color(0xFFFFDAD4),
  onError: Color(0xFFFFFFFF),
  onErrorContainer: Color(0xFF410001),
  background: Color(0xFFFEFBFF),
  onBackground: Color(0xFF1B1B1F),
  surface: Color(0xFFFEFBFF),
  onSurface: Color(0xFFFFFFFF),
  surfaceVariant: Color(0xFFE2E1EC),
  onSurfaceVariant: Color(0xFF45464E),
  outline: Color(0xFF76767F),
  onInverseSurface: Color(0xFFF3F0F5),
  inverseSurface: Color(0xFF303033),
  inversePrimary: Color(0xFFB4C4FF),
  shadow: Color(0xFF000000),
);

const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xFFB4C4FF),
  onPrimary: Color(0xFF002683),
  primaryContainer: Color(0xFF0039B5),
  onPrimaryContainer: Color(0xFFDBE1FF),
  secondary: Color(0xFFC1C5DC),
  onSecondary: Color(0xFF2B3042),
  secondaryContainer: Color(0xFF424659),
  onSecondaryContainer: Color(0xFFDEE1F9),
  tertiary: Color(0xFFE3BADA),
  onTertiary: Color(0xFF432740),
  tertiaryContainer: Color(0xFF5B3D57),
  onTertiaryContainer: Color(0xFFFFD7F7),
  error: Color(0xFFFFB4A9),
  errorContainer: Color(0xFF930006),
  onError: Color(0xFF680003),
  onErrorContainer: Color(0xFFFFDAD4),
  background: Color(0xFF1B1B1F),
  onBackground: Color(0xFFE4E2E6),
  surface: Color(0xFF1B1B1F),
  onSurface: Color(0xFFE4E2E6),
  surfaceVariant: Color(0xFF45464E),
  onSurfaceVariant: Color(0xFFC6C6D0),
  outline: Color(0xFF90909A),
  onInverseSurface: Color(0xFF1B1B1F),
  inverseSurface: Color(0xFFE4E2E6),
  inversePrimary: Color(0xFF2954CE),
  shadow: Color(0xFF000000),
);

这里的 primary surface 颜色我们根据设计稿进行调整

第 2 步：AppTheme 主题类

lib/common/style/theme.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import 'package:flutter/material.dart';

import 'index.dart';

/// 主题
class AppTheme {
  /// 亮色
  static ThemeData light = ThemeData(
    colorScheme: lightColorScheme,
  );

  /// 暗色
  static ThemeData dark = ThemeData(
    colorScheme: darkColorScheme,
  );
}

第 3 步：ConfigService 切换主题功能

常量

lib/common/values/constants.dart

1
static const storageThemeCode = 'theme_code';

lib/common/services/config.dart

1
2
3
4
5
6
7
8
9
class ConfigService extends GetxService {
  static ConfigService get to => Get.find();

  ...

  // 主题
  final RxBool _isDarkModel = Get.isDarkMode.obs;
  bool get isDarkModel => _isDarkModel.value;

1
2
3
4
5
6
7
8
9
// 切换 theme
Future<void> switchThemeModel() async {
  _isDarkModel.value = !_isDarkModel.value;
  Get.changeTheme(
    _isDarkModel.value == true ? AppTheme.dark : AppTheme.light,
  );
  await Storage().setString(Constants.storageThemeCode,
      _isDarkModel.value == true ? "dark" : "light");
}
1
2
3
4
5
6
7
8
// 初始 theme
void initTheme() {
  var themeCode = Storage().getString(Constants.storageThemeCode);
  _isDarkModel.value = themeCode == "dark" ? true : false;
  Get.changeTheme(
    themeCode == "dark" ? AppTheme.dark : AppTheme.light,
  );
}
1
2
3
4
5
6
7
@override
void onReady() {
  super.onReady();
  getPlatform();
  initLocale();
  initTheme();
}

第 4 步：main 初始主题

lib/main.dart

1
2
3
4
5
6
7
@override
Widget build(BuildContext context) {
  return GetMaterialApp(
    title: 'Flutter Demo',

    // 样式
    theme: ConfigService.to.isDarkModel ? AppTheme.dark : AppTheme.light,

第 5 步：加入主题调试功能

lib/pages/styles/styles_index/controller.dart

1
2
3
4
5
// 主题
onThemeSelected() async {
  await ConfigService.to.switchThemeModel();
  update(["styles_index"]);
}

lib/pages/styles/styles_index/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
Widget _buildView() {
  return ListView(
    children: [
      ...
      ListTile(
        onTap: controller.onThemeSelected,
        title:
            Text("主题 : ${ConfigService.to.isDarkModel ? "Dark" : "Light"}"),
      ),
    ],
  );
}

第 6 步：main 加入路由

lib/main.dart

1
2
// 路由
initialRoute: RouteNames.stylesStylesIndex,

最后：运行效果

暗色

img

亮色

img

提交代码到 git

1
2
git add .
git commit -m "theme light dark"