Flutter中如何移除圆角Container包裹的ToggleButtons多余边框轮廓？

实现Toggle组件时给外层Container设置了圆角后，ToggleButtons出现多余的方形边框轮廓，效果如下：

问题根因 #

ToggleButtons组件默认自带边框渲染逻辑，默认边框为直角，不会自动适配外层Container的圆角，因此会露出多余的方形边角。

解决方案 #

方案1：关闭ToggleButtons默认边框（推荐） #

外层已经用Container实现了背景和圆角效果，直接关闭ToggleButtons自带的边框即可，修改后的代码如下：

Container(
      height: 30,
      decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.3),
          borderRadius: BorderRadius.all(Radius.circular(20))),
      child: ToggleButtons(
        isSelected: isSelected,
        selectedColor: Colors.orange[600],
        color: Colors.black,
        fillColor: Colors.white,
        // 新增以下属性关闭默认边框
        borderColor: Colors.transparent,
        selectedBorderColor: Colors.transparent,
        disabledBorderColor: Colors.transparent,
        borderWidth: 0,
        children: <Widget>[
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('Bug',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18))),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('Improvement', style: TextStyle(fontSize: 18))),
        ],
      ),
)

方案2：保留边框，同步圆角配置 #

如果你需要保留ToggleButtons自带的边框效果，只需要给ToggleButtons设置和外层Container一致的圆角即可：

ToggleButtons(
  // 其余原有属性保持不变
  borderRadius: BorderRadius.circular(20),
  borderColor: Colors.grey,
  selectedBorderColor: Colors.orange[600],
  // 其余原有属性保持不变
)

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