SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场vgv-material-theming

vgv-material-theming

前端与建站

查看项目

更新于 10-16 04:06

技能介绍

用途

vgv-material-theming 是 verygoodopensource/vgv-ai-flutter-plugin 提供的一项技能，面向 Flutter 应用，给出使用 Material 3 进行主题化的最佳实践。其目标是把 ThemeData 作为颜色、排版、组件样式和间距的唯一来源，从而避免在组件中散落硬编码的样式值。

主要能力

核心标准

技能要求将以下标准应用到所有主题化工作中：

  • 使用 ThemeData 作为唯一来源，绝不在组件中内联颜色或文字样式。
  • 通过 Theme.of(context).colorScheme 引用颜色，绝不使用 Colors.blue、Colors.red 或任何硬编码的 Color 值。
  • 通过 Theme.of(context).textTheme 引用文字样式，绝不在组件代码中内联 TextStyle(...)。
  • 使用 ColorScheme 定义所有颜色，这是 Material 3 的结构化颜色系统。
  • 在 ThemeData 中集中定义组件主题，例如 FilledButtonThemeData、InputDecorationTheme 等，而不是逐个组件设置。
  • 定义带基准单位的间距系统，不为内边距、外边距或间隙使用任意像素值。
  • 从一开始就支持明暗两套主题，使用 ThemeData 使主题切换无需在组件中写条件逻辑。
  • 避免在 UI 中为主题化写条件逻辑，绝不在组件代码中检查亮度，交由 ThemeData 处理。
  • 优先使用 EdgeInsets.only 和 EdgeInsets.symmetric，绝不使用 EdgeInsets.fromLTRB（位置参数容易出错）。

颜色系统

技能建议集中定义颜色，例如使用一个抽象类 AppColors 存放 primaryColor、secondaryColor、errorColor、surfaceColor 等常量。ColorScheme 类基于 Material 3 规范包含 45 种颜色，可在 ThemeData 中配置。快速原型可使用 ColorScheme.fromSeed()。技能还给出明暗主题变体的写法，通过 AppTheme 的 light 与 dark getter 分别返回 ThemeData，并在组件中通过 Theme.of(context).colorScheme 访问颜色。

排版

技能建议定义 AppTextStyle 类，包含基础样式与命名变体（displayLarge、headlineMedium、bodyLarge 等），再集成到 ThemeData.textTheme，并通过 Theme.of(context).textTheme 访问。字体资源设置、完整的 AppTextStyle 类、TextTheme 集成与组件访问模式参见 references/typography.md。

组件主题

技能建议在 ThemeData 中集中定义组件主题（如 filledButtonTheme、inputDecorationTheme、appBarTheme），而不是为每个组件实例单独设置样式。完整的 AppTheme 类会把 ColorScheme、TextTheme 与所有组件主题组装成单个 ThemeData。FilledButton、InputDecoration、AppBar 主题示例、完整主题组装与组件访问模式参见 references/components.md。

间距系统

技能建议定义 AppSpacing 类，包含基准单位（例如 16px）与命名常量（xxs 到 xxlg）。使用 EdgeInsets.only 或 EdgeInsets.symmetric，绝不使用 EdgeInsets.fromLTRB。完整的 AppSpacing 类、用法示例与 EdgeInsets 偏好参见 references/spacing.md。

使用方式

技能给出以下常见模式：

创建主题：

  1. 定义 AppColors，包含所有颜色常量。
  2. 定义 AppTextStyle，包含所有文字样式常量。
  3. 定义 AppSpacing，基于基准单位建立间距刻度。
  4. 创建 AppTheme 类，提供 light 与 dark getter。
  5. 在每个 ThemeData 中配置 ColorScheme、TextTheme 与组件主题。
  6. 将 AppTheme.light 与 AppTheme.dark 传给 MaterialApp。

新增颜色令牌：

  1. 将颜色常量加入 AppColors。
  2. 将其映射到合适的 ColorScheme 角色（或为自定义令牌创建主题扩展）。
  3. 在组件中通过 Theme.of(context).colorScheme.<role> 引用。

深色模式支持：

  1. 为明暗两套分别创建 ColorScheme 实例。
  2. 使用相同的 TextTheme 与组件主题（它们会通过 colorScheme 自动适配）。
  3. 通过 theme 与 darkTheme 将两套主题传给 MaterialApp。
  4. 绝不在组件代码中检查 Brightness，交由 ThemeData 处理切换。

适用场景

适用于 Flutter 项目需要统一主题规范、集中管理颜色与排版、支持明暗模式切换、减少组件内条件逻辑的场景。

限制

资料未提供该技能的安装命令、收费方式、平台支持范围或具体效果数据，这些信息暂未提供。