Flutter中如何实现按钮随明暗主题自动切换颜色？

当然可以通过Theme.of(context)的方式动态适配主题颜色，以下是几种最优实现方案：

方案一：利用主题内置的ColorScheme属性 #

Flutter的ThemeData自带的colorScheme包含了一套适配明暗主题的颜色对，其中onSurface属性刚好匹配你的需求：

• 浅色主题下，onSurface为黑色（对应Surface的白色背景）
• 深色主题下，onSurface为白色（对应Surface的黑色背景）

直接在按钮中使用即可：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Theme.of(context).colorScheme.onSurface,
    foregroundColor: Theme.of(context).colorScheme.surface, // 按钮文字取反色，保证可读性
  ),
  onPressed: () {},
  child: const Text("适配主题的按钮"),
)

方案二：自定义主题扩展（适合个性化颜色需求） #

如果需要更定制化的颜色，可以通过ThemeExtension定义一套专属的明暗适配颜色：

1. 定义自定义颜色扩展类：

class CustomButtonColors extends ThemeExtension<CustomButtonColors> {
  final Color buttonColor;

  CustomButtonColors({required this.buttonColor});

  @override
  ThemeExtension<CustomButtonColors> copyWith({Color? buttonColor}) {
    return CustomButtonColors(buttonColor: buttonColor ?? this.buttonColor);
  }

  @override
  ThemeExtension<CustomButtonColors> lerp(
      ThemeExtension<CustomButtonColors>? other, double t) {
    if (other is! CustomButtonColors) return this;
    return CustomButtonColors(
      buttonColor: Color.lerp(buttonColor, other.buttonColor, t)!,
    );
  }
}

2. 在主题配置中添加扩展：

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: const IntroPage(),
  theme: ThemeData.light().copyWith(
    extensions: [
      CustomButtonColors(buttonColor: Colors.black),
    ],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: [
      CustomButtonColors(buttonColor: Colors.white),
    ],
  ),
)

3. 在按钮中获取自定义颜色：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Theme.of(context).extension<CustomButtonColors>()?.buttonColor,
  ),
  onPressed: () {},
  child: const Text("自定义主题按钮"),
)

方案三：直接根据主题亮度判断（简单直接） #

如果不想依赖主题内置属性，也可以直接判断当前主题亮度来设置颜色：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Theme.of(context).brightness == Brightness.light 
        ? Colors.black 
        : Colors.white,
  ),
  onPressed: () {},
  child: const Text("亮度判断按钮"),
)

推荐优先使用方案一，它遵循Flutter主题设计规范，能保证颜色在不同主题下的可读性和视觉一致性。

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