Flutter中如何基于明暗主题切换Container背景色？

以下几种方法可以实现需求，根据你的场景选择：

方法1：通过ThemeExtension自定义主题颜色 #

这是最规范的方式，把容器颜色纳入主题体系，和你已有的明暗主题配置统一管理。

首先定义一个自定义主题扩展类：

class CustomThemeColors extends ThemeExtension<CustomThemeColors> {
  final Color containerBackgroundColor;

  CustomThemeColors({required this.containerBackgroundColor});

  @override
  CustomThemeColors copyWith({Color? containerBackgroundColor}) {
    return CustomThemeColors(
      containerBackgroundColor: containerBackgroundColor ?? this.containerBackgroundColor,
    );
  }

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

然后在你的明暗ThemeData中添加这个扩展：

// 浅色主题
ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  // 你的其他主题配置...
  extensions: [
    CustomThemeColors(containerBackgroundColor: Colors.pink),
  ],
);

// 深色主题
ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  // 你的其他主题配置...
  extensions: [
    CustomThemeColors(containerBackgroundColor: Colors.green),
  ],
);

最后在Container中获取颜色：

Container(
  color: Theme.of(context).extension<CustomThemeColors>()?.containerBackgroundColor,
  // 容器的其他属性
)

方法2：直接根据当前主题亮度判断 #

如果不需要把颜色纳入主题体系，直接通过MediaQuery获取当前亮度动态设置：

Container(
  color: MediaQuery.of(context).platformBrightness == Brightness.light 
      ? Colors.pink 
      : Colors.green,
  // 容器的其他属性
)

方法3：复用ThemeData现有颜色（可选） #

如果你的粉色/绿色刚好能对应ThemeData中已配置的颜色（比如primary、secondary等），可以直接复用：

// 假设你已经在浅色ThemeData把primaryColor设为粉色，深色设为绿色
Container(
  color: Theme.of(context).primaryColor,
  // 容器的其他属性
)

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