Flutter 3.35.2 主题颜色设置指南

在 Flutter 3.35.2 中设置 APP 的主题颜色主要通过配置 ThemeData 来实现，这允许你统一管理应用的整体视觉风格。

🎨 Flutter 3.35.2 主题颜色设置指南

基本主题设置方法

在 Flutter 中，你通常是在应用的根 MaterialApp 或 CupertinoApp widget 中通过 theme 属性来定义全局主题的。

全局主题设置

以下是在 MaterialApp 中全局设置主题颜色的基本代码结构：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: '我的应用',theme: ThemeData(useMaterial3: true, // 使用 Material 3 设计primaryColor: Colors.blue, // 主要颜色，用于导航栏、按钮等primaryColorDark: Colors.blue[800], // 主要颜色的深色变体primaryColorLight: Colors.blue[100], // 主要颜色的浅色变体colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // 基于种子颜色生成配色方案scaffoldBackgroundColor: Colors.grey[50], // 页面背景色appBarTheme: const AppBarTheme(backgroundColor: Colors.blue, // AppBar 背景色foregroundColor: Colors.white, // AppBar 上的文字和图标颜色),textTheme: const TextTheme(bodyMedium: TextStyle(color: Colors.black87), // 默认文本颜色),),home: const MyHomePage(),);}
}

常用主题颜色属性说明

下表列出了 ThemeData 中一些常用的颜色属性及其用途：

属性	描述	示例值
primaryColor	应用的主要品牌颜色，用于导航栏、按钮等关键元素。	Colors.blue
primaryColorDark	primaryColor 的深色变体，适用于需要更高对比度的场合。	Colors.blue[800]
primaryColorLight	primaryColor 的浅色变体。	Colors.blue[100]
colorScheme	定义一组基于 Material 2 或 Material 3 的颜色角色，推荐使用 fromSeed 方法。	ColorScheme.fromSeed(seedColor: Colors.blue)
scaffoldBackgroundColor	作为 Scaffold 组件默认背景色，即页面的背景颜色。	Colors.grey[50]
appBarTheme	用于定义应用栏（AppBar）的样式，包括颜色、文字样式等。	AppBarTheme(color: Colors.blue)
textTheme	定义应用中文本的样式，如字体、颜色、大小等。	TextTheme(bodyMedium: TextStyle(color: Colors.black87))
accentColor (已弃用)	旧版的前景色（按钮、文本、覆盖边缘效果等），建议改用 colorScheme 的 secondary。	Colors.green
hintColor	用于提示文本或占位符文本的颜色，例如在 TextField 中。	Colors.grey
errorColor	用于输入验证错误等场景的颜色。	Colors.red

使用 primarySwatch 创建材质调色板

primarySwatch 是 Material Design 中的一个概念，它接受一个 MaterialColor 对象，该对象包含一种颜色的 10 种不同深浅变体。Flutter 提供了一些预定义的材质颜色。

ThemeData(primarySwatch: Colors.blue, // 使用预定义的蓝色调色板
),

请注意：primarySwatch 和 primaryColor 是互斥的。如果同时设置了两者，primaryColor 会覆盖 primarySwatch 中的主色。Flutter 预定义的材质颜色是有限的（如 Colors.blue、Colors.red 等）。如果你的品牌色不在其中，你需要自定义 MaterialColor。

如何自定义 MaterialColor

如果你的主题色不是 Flutter 预定义的那些材质颜色，你可以通过定义 MaterialColor 来创建自己的调色板。

// 自定义一个 MaterialColor（例如，主色为 0xFF913f91）
const MaterialColor myCustomPurple = MaterialColor(0xFF913f91, // 主要颜色的 ARGB 值<int, Color>{50: Color(0xFFf3e5f5),100: Color(0xFFe1bee7),200: Color(0xFFce93d8),300: Color(0xFFba68c8),400: Color(0xFFab47bc),500: Color(0xFF9c27b0), // 主要色调600: Color(0xFF8e24aa),700: Color(0xFF7b1fa2),800: Color(0xFF6a1b9a),900: Color(0xFF4a148c),},
);// 在 ThemeData 中使用
ThemeData(primarySwatch: myCustomPurple,
);

使用 ColorScheme (推荐)

从 Flutter 3.16 开始，Material 3 成为默认主题。使用 ColorScheme（特别是 ColorScheme.fromSeed）是更现代和灵活的方式，它能基于一种种子颜色生成一套协调的配色方案。

ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, // 你的品牌色brightness: Brightness.light, // 亮度模式（light 或 dark）),useMaterial3: true, // 启用 Material 3
);

在 Widget 中使用主题色

定义好主题后，你可以在应用的任何 widget 中通过 Theme.of(context) 来获取并使用这些颜色：

Widget build(BuildContext context) {return Scaffold(backgroundColor: Theme.of(context).scaffoldBackgroundColor,appBar: AppBar(title: Text('首页', style: TextStyle(color: Theme.of(context).primaryColor)),),body: Container(color: Theme.of(context).colorScheme.primaryContainer, // 使用 ColorScheme 中的颜色child: Text('Hello, World!',style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer,),),),floatingActionButton: FloatingActionButton(onPressed: () {},backgroundColor: Theme.of(context).colorScheme.primary, // 使用主色foregroundColor: Theme.of(context).colorScheme.onPrimary, // 使用主色上的文本/图标色child: const Icon(Icons.add),),);
}

局部主题覆盖

若想在某些特定部分使用不同的主题，可以使用 Theme widget 来覆盖父级主题。

Theme(// 完全覆盖一个新的 ThemeDatadata: ThemeData.dark().copyWith(primaryColor: Colors.pink),// 或者继承当前主题并只覆盖特定属性// data: Theme.of(context).copyWith(primaryColor: Colors.pink),child: FloatingActionButton(onPressed: () {},child: const Icon(Icons.add),),
);

暗色主题

支持暗色主题可以提升用户体验。你可以通过定义 darkTheme 属性并配合 themeMode 来实现。

MaterialApp(theme: ThemeData.light().copyWith( // 亮色主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light),),darkTheme: ThemeData.dark().copyWith( // 暗色主题colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),),themeMode: ThemeMode.system, // 跟随系统、亮色或暗色home: const MyHomePage(),
);

实用技巧与注意事项

1. primarySwatch 与 primaryColor：理解它们的区别很重要。primarySwatch 提供一系列颜色 shades，而 primaryColor 通常只设置单一主色。若同时设置，primaryColor 会覆盖 primarySwatch 的主色。
2. 亮度 (brightness)：Brightness.light 和 Brightness.dark 决定了主题的整体亮度，这会影响系统状态栏图标颜色（亮或暗）以及一些默认 widget 的外观。
3. 使用 copyWith 方法：当你想在现有主题基础上只修改少数几个属性时，ThemeData.copyWith() 方法非常有用，可以避免重新定义所有属性。
4. 在代码中引用主题色：尽量使用 Theme.of(context).colorScheme.primary 而不是直接使用 Colors.blue 这样的硬编码颜色值，这样能保证主题切换时颜色自动更新。
5. 自定义颜色：对于品牌色，自定义 MaterialColor 可以让你在不同状态下都有合适的颜色深浅可用。
6. 测试对比度：确保文本和图标在其背景色上有足够的对比度，以保证可访问性。

---