Flutter中如何为按钮适配深色模式？

一、选对按钮组件，自动继承主题色 #

你当前使用的MaterialButton是Flutter旧版组件，现在更推荐用**ElevatedButton、TextButton、OutlinedButton**这类现代按钮组件——它们会自动读取ThemeData里的配色配置，无需额外硬编码。如果坚持用MaterialButton也能实现，但现代组件的主题适配逻辑更完善。

为什么你的按钮没继承主题色？ #

你代码里给Text硬写了color: Colors.black，直接覆盖了主题文本色；同时MaterialButton没有关联主题里的buttonColor，导致明暗模式切换时按钮颜色没变化。另外，ButtonThemeData是旧版配置方式，建议结合ColorScheme来定义按钮配色，适配现代组件。

二、调整主题配置，统一明暗模式配色 #

修改MyThemes，给ColorScheme补充按钮相关颜色，同时保留ButtonThemeData兼容旧组件：

class MyThemes {
  static final darkTheme = ThemeData(
    primaryColor: Colors.black,
    colorScheme: const ColorScheme.dark(
      primary: Colors.orange, // 主按钮背景色
      onPrimary: Colors.white, // 主按钮文本色
    ),
    buttonTheme: const ButtonThemeData(
      buttonColor: Colors.orange,
      textTheme: ButtonTextTheme.primary,
    ),
    iconTheme: IconThemeData(color: Colors.purple.shade200, opacity: 0.8),
  );

  static final lightTheme = ThemeData(
    primaryColor: Colors.white,
    colorScheme: const ColorScheme.light(
      primary: Colors.orange, // 主按钮背景色
      onPrimary: Colors.white, // 主按钮文本色
    ),
    buttonTheme: const ButtonThemeData(
      buttonColor: Colors.orange,
      textTheme: ButtonTextTheme.primary,
    ),
    iconTheme: const IconThemeData(color: Colors.black, opacity: 0.8),
  );
}

添加ColorScheme的primary和onPrimary后，现代按钮组件会自动读取这两个值适配明暗模式。

三、主页按钮样式化实现 #

方案1：使用现代按钮组件（推荐） #

替换MaterialButton为ElevatedButton，自动继承主题色，同时自定义圆角匹配容器风格：

Padding(
  padding: const EdgeInsets.only(top: 10.0, right: 20, left: 20),
  child: Container(
    width: 250,
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(27)),
    ),
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(27),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                ),
                child: const Text(
                  'Upgrade to PRO',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    // 无需硬写color，自动继承onPrimary
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

切换明暗模式时，按钮会自动切换主题定义的背景色和文本色。

方案2：继续使用MaterialButton（兼容旧代码） #

如果不想更换组件，修改MaterialButton配置，让它读取主题颜色，同时去掉文本硬写的颜色：

MaterialButton(
  onPressed: () {},
  color: Theme.of(context).buttonTheme.buttonColor, // 读取主题按钮背景色
  textColor: Theme.of(context).colorScheme.onPrimary, // 读取主题按钮文本色
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(27)),
  ),
  child: const Text(
    'Upgrade to PRO',
    style: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
      // 删除硬写的color
    ),
  ),
),

四、额外提示 #

• 优先通过主题统一管理颜色，尽量减少硬编码，这样后续修改主题时无需逐个调整按钮样式。
• 确保HomeScreen在ThemeProvider的子树中，否则Theme.of(context)无法获取自定义主题数据。

内容的提问来源于stack exchange，提问作者Usama Bin Tahir