[TOC] ## theme Material 3 推荐使用 ## ColorScheme.fromSeed() 颜色主题 **核心语义颜色（Primary / Secondary / Tertiary）** | 名称 | 用途 | | --- | --- | | `primary` | 应用主色，强调元素（如按钮、选中项） | | `onPrimary` | 显示在主色背景上的内容（如文字/图标） | | `primaryContainer` | 容器的主色调（例如卡片背景） | | `onPrimaryContainer` | 显示在 `primaryContainer` 上的内容 | | `primaryFixed`, `primaryFixedDim` | 更稳定的主色（用于高对比度场景） | | `onPrimaryFixed`, `onPrimaryFixedVariant` | 显示在 `primaryFixed` 背景上的内容 | **错误与状态颜色（Error）** | 名称 | 用途 | | --- | --- | | `error` | 错误状态颜色（如表单验证失败） | | `onError` | 显示在 `error` 背景上的内容 | | `errorContainer` | 错误提示容器的颜色 | | `onErrorContainer` | 显示在 `errorContainer` 上的内容 | **表面与内容颜色（Surface）** > 这些颜色与“界面背景”及其内容的对比有关： | 名称 | 用途 | | --- | --- | | `surface` | 通常的 UI 背景（如卡片、底部导航等） | | `onSurface` | 显示在 `surface` 上的内容（如文字） | | `surfaceDim` / `surfaceBright` | 更暗/更亮的 surface 变体，用于深浅不同的层级背景 | | `surfaceContainer*`（Low/High/Highest/Lowest） | 分层容器的背景色，用于 elevation 视觉分层 | | `onSurfaceVariant` | 用于次要文字、图标等 | | `inverseSurface` / `onInverseSurface` | 通常用于深色背景上的浅色内容（或反之） | | `inversePrimary` | 用于高对比的反向主色（如下拉菜单的高亮） | **辅助颜色** | 名称 | 用途 | | --- | --- | | `outline` | 控件边框、分割线、边界提示线颜色 | | `outlineVariant` | outline 的变体，用于弱化边界 | | `shadow` | 阴影颜色（如 `Material.elevation`） | | `scrim` | 背景遮罩色（如对话框后面遮罩） | | `surfaceTint` | 提升视觉深度的叠加颜色（常用于 Material 3 的 Elevation Overlay） | ### 使用 ColorScheme.fromSeed() 引入主题 ``` MaterialApp( theme: ThemeData( colorScheme:ColorScheme.fromSeed( seedColor: Colors.blue, brightness: Brightness.light, surface: Colors.white, // 用于 Container 背景色 surfaceDim: Colors.white, // 更暗/更亮的 surface 变体，用于深浅不同的层级背景 ); ) ) ``` 使用 ``` child: Container( color: Theme.of(context).colorScheme.surface, ... ), ``` ## 文字 TextTheme ``` TextTheme( bodyLarge: TextStyle(color: Colors.black), // 启动页大标题 bodyMedium: TextStyle(color: Colors.grey), // 页面主标题 bodySmall: TextStyle(color: Colors.black), // 辅助说明文本 labelLarge: TextStyle(color: Colors.black), // 按钮文本 labelMedium: TextStyle(color: Colors.black), // 列表项标题 labelSmall: TextStyle(color: Colors.black), // 普通文本内容 displayLarge: TextStyle(color: Colors.black), // 启动页大标题 displayMedium: TextStyle(color: Colors.black), // 页面主标题 displaySmall: TextStyle(color: Colors.black), // 辅助说明文本 headlineLarge: TextStyle(color: Colors.black), // 标题级 headlineMedium: TextStyle(color: Colors.black), // 标题级 headlineSmall: TextStyle(color: Colors.black), // 标题级 ); ```