Flutter如何为ButtonBar的选中按钮添加高亮边框效果

你可以在现有代码基础上直接改造，不需要重构原有组件结构，具体实现步骤如下：

• 首先在组件状态类中新增状态变量，记录当前选中按钮对应的色值组，用于判断按钮激活状态：

// 存储当前选中的渐变配色，可设置默认初始值
late List<Color> currentSelectedColors = [Colors.purpleAccent, Colors.pinkAccent];

• 修正原有渐变配置的问题：你代码里stops数组第二个值写0会导致粉色渐变完全不显示，改成1.0才能实现从右上角紫色到左下角粉色的正常过渡效果。
• 给每个按钮外层Container的BoxDecoration动态配置边框：选中状态显示高亮边框，非选中状态显示等宽透明边框，避免切换选中状态时出现布局跳动；可选给选中状态加外发光阴影，更贴合示例的高亮效果。
• 点击按钮时，除了原有setColors逻辑，同步更新选中状态变量触发UI重绘。

修改后的核心代码示例：

ButtonBar(
  children: [
    Container(
      width: 40,
      // 加2px外边距，避免选中边框和相邻按钮挤压
      margin: const EdgeInsets.all(2),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: const <Color>[
            Colors.purpleAccent,
            Colors.pinkAccent,
          ],
          // 修正stops配置错误
          stops: const <double>[0.5, 1.0],
        ),
        shape: BoxShape.circle,
        // 动态配置边框
        border: Border.all(
          width: 2,
          color: listEquals(currentSelectedColors, [Colors.purpleAccent, Colors.pinkAccent]) 
              ? Colors.white 
              : Colors.transparent,
        ),
        // 选中状态加浅发光阴影
        boxShadow: listEquals(currentSelectedColors, [Colors.purpleAccent, Colors.pinkAccent])
            ? [
                BoxShadow(
                  color: Colors.white.withOpacity(0.5),
                  blurRadius: 4,
                  spreadRadius: 1,
                )
              ]
            : null,
      ),
      child: ElevatedButton(
        onPressed: () {
          setColors(Colors.purpleAccent, Colors.pinkAccent);
          // 更新选中状态
          setState(() {
            currentSelectedColors = [Colors.purpleAccent, Colors.pinkAccent];
          });
        },
        style: ElevatedButton.styleFrom(
          shape: const CircleBorder(),
          primary: Colors.transparent,
          shadowColor: Colors.transparent,
        ),
        child: const Ink(),
      ),
    ),
    // 其余颜色按钮按相同逻辑，替换对应色值判断即可
    // ...
  ],
)

注意：判断两个颜色数组是否相等需要先导入package:flutter/foundation.dart，使用内置的listEquals方法，不能直接用==判断List相等，否则判断逻辑永远不生效。

最终实现效果参考：

如果需要调整边框粗细、高亮颜色或者阴影强度，直接修改Border.all的width、color参数和boxShadow配置即可。

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