用途:把 Refactoring UI 的界面设计原则翻译成 Flutter/Dart 的具体实现写法,作为 mobile-app-design-mastery 技能的配套(companion)技能使用。前者负责移动端设计理论与决策,本技能提供 Flutter 专有语法与落地方式。
主要能力:
- 主题优先(Theme First):新建样式前必须检查项目已有主题配置。若项目存在 ThemeData、AppColors、AppTextStyles 或类似定义,应直接复用,常见路径为 lib/core/theme/ 或 lib/config/。优先级为:项目自定义主题(AppColors、AppTextStyles、自定义 ThemeExtension)优先,其次通过 Theme.of(context) 访问,硬编码值仅作最后手段。
- ThemeData 设置(Material 3):通过 ThemeData 的 useMaterial3 与 ColorScheme.fromSeed 指定品牌色与明暗模式,并配置 textTheme。
- 颜色访问模式:推荐通过 Theme.of(context).colorScheme 取色,如 colors.primary、colors.onSurface;可编写 BuildContext 扩展以简化访问。资料列出 ColorScheme 各角色在明暗模式下的用途,如 primary/onPrimary、surface/onSurface、surfaceContainerHighest、outline、error。
- 排版:基于 Material 3 字号阶梯(displayLarge 57、headlineMedium 28、bodyMedium 14、labelLarge 14 等)使用 TextTheme,而非自行写 fontSize。
- 间距系统:使用 4dp 网格,可定义 AppSpacing 常量(xs 4、sm 8、md 12、base 16、lg 24、xl 32、xxl 48)及 SizedBox 快捷项。
- BoxDecoration 写法:提供卡片(扁平/投影)、输入框等装饰写法,以及 AppShadows 阴影阶梯(sm/md/lg/xl,含 blurRadius 与 offset)。
- 反模式清单:明确避免硬编码颜色(Colors.blue)、自写 TextStyle(fontSize)、脱离 4dp 网格的尺寸(如 17)、无理由的非对称内边距。
使用方式:资料未提供安装命令或调用方式,仅列出参考文件——theming.md(ThemeData 与 ColorScheme)、widgets.md(组件配方)、extensions.md(ThemeExtension 模式)。可按需查阅对应文档。
适用场景:Flutter 移动端界面开发中统一主题、颜色、排版、间距与阴影规范的场合。
限制:需配合 mobile-app-design-mastery 使用;本技能不负责设计理论决策。资料未提供收费、平台支持、具体安装步骤等事实。