Flutter点击单个ElevatedButton时将其余同组按钮置灰的实现方法

核心是通过状态管理记录当前选中的按钮，构建按钮时根据选中状态动态赋值颜色：

• 在当前页面的State类中新增int? selectedNum状态变量，默认值为null，代表初始无按钮被选中
• 点击任意按钮时，将selectedNum更新为当前点击按钮的编号，触发页面重绘
• 构建每个按钮时判断：如果selectedNum为null，所有按钮用默认色；如果selectedNum不等于当前按钮编号，按钮用灰色，等于则保留默认色

// 首先在你的State类中添加如下两个变量
int? selectedNum;
// 替换为你实际需要的按钮默认颜色
final Color defaultButtonColor = Colors.blue;

// 修改后的按钮构建方法
Widget buildElevatedButton(int number) {
  // 动态计算当前按钮的显示颜色
  Color currentColor = defaultButtonColor;
  if (selectedNum != null && selectedNum != number) {
    currentColor = Colors.grey;
  }

  return Padding(
    padding: EdgeInsets.all(5.0),
    child: Column(
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            // 点击时更新选中状态，触发重绘
            setState(() {
              selectedNum = number;
            });
          },
          child: Text(
            "$number",
            textAlign: TextAlign.center,
          ),
          style: ElevatedButton.styleFrom(
            shadowColor: Colors.grey,
            primary: currentColor,
            minimumSize: Size(70, 70),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            textStyle: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
  );
}

如果需要支持点击已选中的按钮恢复所有按钮为默认颜色，修改onPressed逻辑即可：

onPressed: () {
  setState(() {
    selectedNum = selectedNum == number ? null : number;
  });
},

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