Flutter中点击Elevated Button时修改背景颜色的问题

你的代码逻辑本身是正确的，但在部分Flutter版本中，ElevatedButton的背景色设置会被组件的状态样式或主题配置覆盖，导致点击后颜色不更新。以下是两种可行的修复方案：

方案一：使用MaterialStateProperty.resolveWith适配状态 #

通过动态解析按钮状态返回对应颜色，确保自定义颜色能覆盖默认状态样式：

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ElevatedButton.styleFrom(
            backgroundColor: MaterialStateProperty.resolveWith((states) {
              return _flag ? Colors.red : Colors.teal;
            }),
          ),
        ),
      ),
    );
  }
}

方案二：直接使用ButtonStyle设置背景色 #

改用ButtonStyle的backgroundColor属性，明确指定颜色值：

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(
              _flag ? Colors.red : Colors.teal,
            ),
          ),
        ),
      ),
    );
  }
}

额外排查点 #

如果上述方案仍不生效，检查你的App主题是否配置了elevatedButtonTheme，主题中定义的固定背景色会优先于按钮自身的样式设置，此时需要修改主题配置或在按钮样式中明确覆盖主题属性。

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