2.2 字体、颜色、圆角、间隙配置

2.2 字体、颜色、圆角、间隙配置

样式配置，实现步骤：

整个 app 的样式需要统一规范的管理，你可以理解成常量抽取定义。

第 1 步：颜色

一个 app 在生产的时候不会只有 md3 定义的那么几种颜色，毕竟每家都有自己的一套设计系统。

如 饿了么

img

这里就有 成功、警告、失败、提示 几个颜色

lib/common/style/colors.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import 'package:flutter/material.dart';
import 'package:get/get.dart';

/// 应用颜色
class AppColors {
  /// *******************************************
  /// 自定义 颜色
  /// *******************************************

  /// 强调
  static Color get highlight =>
      Get.isDarkMode ? const Color(0xFFFFB4A9) : const Color(0xFFF77866);

  /// Success
  /// Warning
  /// Danger
  /// Info

  /// *******************************************
  /// Material System
  /// *******************************************

  static Color get background => Get.theme.colorScheme.background;

  static Brightness get brightness => Get.theme.colorScheme.brightness;

  static Color get error => Get.theme.colorScheme.error;

  static Color get errorContainer => Get.theme.colorScheme.errorContainer;

  static Color get inversePrimary => Get.theme.colorScheme.inversePrimary;

  static Color get inverseSurface => Get.theme.colorScheme.inverseSurface;

  static Color get onBackground => Get.theme.colorScheme.onBackground;

  static Color get onError => Get.theme.colorScheme.onError;

  static Color get onErrorContainer => Get.theme.colorScheme.onErrorContainer;

  static Color get onInverseSurface => Get.theme.colorScheme.onInverseSurface;

  static Color get onPrimary => Get.theme.colorScheme.onPrimary;

  static Color get onPrimaryContainer =>
      Get.theme.colorScheme.onPrimaryContainer;

  static Color get onSecondary => Get.theme.colorScheme.onSecondary;

  static Color get onSecondaryContainer =>
      Get.theme.colorScheme.onSecondaryContainer;

  static Color get onSurface => Get.theme.colorScheme.onSurface;

  static Color get onSurfaceVariant => Get.theme.colorScheme.onSurfaceVariant;

  static Color get onTertiary => Get.theme.colorScheme.onTertiary;

  static Color get onTertiaryContainer =>
      Get.theme.colorScheme.onTertiaryContainer;

  static Color get outline => Get.theme.colorScheme.outline;

  static Color get primary => Get.theme.colorScheme.primary;

  static Color get primaryContainer => Get.theme.colorScheme.primaryContainer;

  static Color get secondary => Get.theme.colorScheme.secondary;

  static Color get secondaryContainer =>
      Get.theme.colorScheme.secondaryContainer;

  static Color get shadow => Get.theme.colorScheme.shadow;

  static Color get surface => Get.theme.colorScheme.surface;

  static Color get surfaceVariant => Get.theme.colorScheme.surfaceVariant;

  static Color get tertiary => Get.theme.colorScheme.tertiary;

  static Color get tertiaryContainer => Get.theme.colorScheme.tertiaryContainer;
}

这里我们加入了产品强调色
其它的 colorScheme 做了快捷访问
Get.theme 是访问当前样式配置

第 2 步：字体配置

img

lib/common/style/text.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
import 'package:flutter/material.dart';
import 'package:get/get.dart';

/// 字体样式
class AppTextStyles {
  static TextStyle? get bodyLarge => Get.textTheme.bodyLarge;
  static TextStyle? get bodyMedium => Get.textTheme.bodyMedium;
  static TextStyle? get bodySmall => Get.textTheme.bodySmall;

  static TextStyle? get bodyText1 => Get.textTheme.bodyText1;
  static TextStyle? get bodyText2 => Get.textTheme.bodyText2;

  static TextStyle? get button => Get.textTheme.button;
  static TextStyle? get caption => Get.textTheme.caption;

  static TextStyle? get displayLarge => Get.textTheme.displayLarge;
  static TextStyle? get displayMedium => Get.textTheme.displayMedium;
  static TextStyle? get displaySmall => Get.textTheme.displaySmall;

  static TextStyle? get headline1 => Get.textTheme.headline1;
  static TextStyle? get headline2 => Get.textTheme.headline2;
  static TextStyle? get headline3 => Get.textTheme.headline3;
  static TextStyle? get headline4 => Get.textTheme.headline4;
  static TextStyle? get headline5 => Get.textTheme.headline5;
  static TextStyle? get headline6 => Get.textTheme.headline6;

  static TextStyle? get headlineLarge => Get.textTheme.headlineLarge;
  static TextStyle? get headlineMedium => Get.textTheme.headlineMedium;
  static TextStyle? get headlineSmall => Get.textTheme.headlineSmall;

  static TextStyle? get labelLarge => Get.textTheme.labelLarge;
  static TextStyle? get labelMedium => Get.textTheme.labelMedium;
  static TextStyle? get labelSmall => Get.textTheme.labelSmall;

  static TextStyle? get overline => Get.textTheme.overline;
  static TextStyle? get subtitle1 => Get.textTheme.subtitle1;
  static TextStyle? get subtitle2 => Get.textTheme.subtitle2;

  static TextStyle? get titleLarge => Get.textTheme.titleLarge;
  static TextStyle? get titleMedium => Get.textTheme.titleMedium;
  static TextStyle? get titleSmall => Get.textTheme.titleSmall;
}

Get.textTheme 读取的是当前字体样式配置

第 3 步：圆角配置

lib/common/style/radius.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/// 圆角定义
class AppRadius {
  /// 按钮圆角
  static double get button => 6;

  /// 按钮 文字填充圆角
  static double get buttonTextFilled => 3;

  /// 卡片圆角
  static double get card => 10;

  /// sheet圆角
  static double get sheet => 20;

  /// 输入框圆角
  static double get input => 5;

  /// 图片圆角
  static double get image => 6;
}

保持一致性 所有的圆角都定义出来

第 4 步：间距配置

lib/common/style/space.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
import 'package:flutter/material.dart';

/// 间距
class AppSpace {
  /// 按钮
  static double get button => 5;

  /// 按钮
  static double get buttonHeight => 50;

  /// 卡片内 - 12 上下左右
  static double get card => 15;

  /// 输入框 - 10, 10 上下，左右
  static EdgeInsetsGeometry get edgeInput =>
      const EdgeInsets.symmetric(vertical: 10, horizontal: 10);

  /// 列表视图
  static double get listView => 5;

  /// 列表行 - 10 上下
  static double get listRow => 10;

  /// 列表项
  static double get listItem => 8;

  /// 页面内 - 16 左右
  static double get page => 16;

  /// 段落 - 24
  static double get paragraph => 24;

  /// 标题内容 - 10
  static double get titleContent => 10;

  /// 图标文字 - 15
  static double get iconTextSmail => 5;
  static double get iconTextMedium => 10;
  static double get iconTextLarge => 15;
}

所有用到的间距也要定义出来，这样在不用的界面切换中，用户感受是一致的。

提交代码到 git