Flutter ButtonBar 如何实现按钮点击切换高亮并修复渲染溢出

• 高亮逻辑硬编码绑定：原实现将绿色圆角背景完全固定写在索引0的按钮外层结构上，其余按钮没有对应的动态背景渲染逻辑，点击其他按钮时自然无法复刻选中高亮效果
• 布局结构冗余冲突：首个按钮外层额外嵌套了Material+Padding+Row的孤立结构，和其余按钮的渲染尺寸、结构不统一，触发ButtonBar基于Flow布局的尺寸计算错位，最终引发页面右侧的RenderFlow渲染溢出异常
• 样式判断逻辑残缺：原代码中对未选中按钮的文本颜色设置没有做动态适配，多处出现同色判断的无效逻辑，无法形成统一的选中视觉反馈

• 抽离统一的按钮渲染规则：对所有按钮做循环生成，根据当前选中索引动态判断是否套上绿色圆角高亮背景，不再单独为某个按钮写死结构
• 统一所有按钮的尺寸、内边距、文本样式规则，消除不同结构带来的布局计算差异
• 给ButtonBar补充溢出防护配置，避免极端场景下的渲染越界
• 去掉冗余的嵌套Row结构，减少不必要的组件层级

class RecipeButtonBar extends StatefulWidget {
  // 可外部配置的按钮文案列表
  final List<String> buttonLabels;
  // 初始选中索引
  final int initialSelectedIndex;
  // 选中状态变更回调
  final Function(int index)? onIndexChanged;

  const RecipeButtonBar({
    Key? key,
    this.buttonLabels = const ["Button 1", "Button 2", "Button 3", "Button 4"],
    this.initialSelectedIndex = 0,
    this.onIndexChanged,
  }) : super(key: key);

  @override
  _RecipeButtonBarState createState() => _RecipeButtonBarState();
}

class _RecipeButtonBarState extends State<RecipeButtonBar> {
  late int selectedIndex;

  @override
  void initState() {
    super.initState();
    selectedIndex = widget.initialSelectedIndex;
  }

  void _handleTap(int index) {
    setState(() {
      selectedIndex = index;
    });
    widget.onIndexChanged?.call(index);
  }

  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      // 补充溢出防护配置，解决RenderFlow越界异常
      overflowDirection: VerticalDirection.down,
      alignment: MainAxisAlignment.start,
      children: List.generate(widget.buttonLabels.length, (index) {
        final isSelected = index == selectedIndex;
        // 动态渲染带高亮效果的统一结构按钮
        return Material(
          color: isSelected ? const Color(0xff75c760) : Colors.transparent,
          borderRadius: BorderRadius.circular(15),
          clipBehavior: Clip.antiAlias,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 4),
            child: TextButton(
              style: TextButton.styleFrom(
                // 移除TextButton默认的冗余内边距，保证尺寸计算统一
                padding: EdgeInsets.zero,
                minimumSize: Size.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),
              onPressed: () => _handleTap(index),
              child: Text(
                widget.buttonLabels[index],
                style: TextStyle(
                  color: isSelected ? Colors.white : Colors.black87,
                  fontSize: 12,
                  fontFamily: "Poppins",
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        );
      }),
    );
  }
}

• 点击任意按钮时，对应按钮会自动呈现和原首个按钮完全一致的绿色圆角高亮背景，文本同步切换为白色
• 未选中状态的按钮使用透明背景，视觉效果和原普通TextButton保持一致
• 所有按钮采用完全统一的组件结构，不会再出现结构错位引发的RenderFlow渲染异常

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