Flutter设置primarySwatch时如何在亮色主色上保持文本图标为白色

Flutter ThemeData默认会通过计算主色的亮度值自动匹配前景色（onPrimary）：当主色亮度高于系统阈值时，默认用黑色作为前景文本/图标颜色，亮度低于阈值时用白色，这就是你设置橙色等亮色主色时前景变黑的原因。

以下两种全局配置方案无需逐个覆写组件样式即可实现需求：

方案1：直接指定全局onPrimary颜色 #

这是最直接的适配方案，同时兼容Material 2和Material 3规范：

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.orange,
    // Material 2 全局前景配置
    onPrimary: Colors.white,
    // Flutter 3.0+默认开启Material3时需要补充以下配置
    colorScheme: ColorScheme.fromSwatch(
      primarySwatch: Colors.orange,
    ).copyWith(
      onPrimary: Colors.white,
    ),
  ),
  home: const YourHomePage(),
)

配置后所有以primary色为背景的系统组件（AppBar、ElevatedButton、FloatingActionButton等）的文本、图标都会自动使用白色作为前景色。

方案2：强制主色亮度为暗色 #

你也可以通过修改主色的亮度属性，让系统默认判定主色为暗色，自动匹配白色前景：

ThemeData(
  primarySwatch: Colors.orange,
  // Material 2 配置
  primaryColorBrightness: Brightness.dark,
  // Material 3 补充配置
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.orange,
    brightness: Brightness.dark,
  ),
)

两种方案均为全局生效，仅当你需要某个单独组件使用特殊样式时，再单独覆写对应组件的样式即可。

内容的提问来源于stack exchange，提问作者Apri