Flutter如何实现单侧边框的圆角/渐细效果？

你当前的代码已经正确实现了底部单侧边框的核心逻辑，这里给你补充几个优化点和扩展场景：

1. 完善边框样式
   默认的BorderSide只设置了宽度，你可以加上颜色、样式（实线/虚线）等参数，让边框效果更贴合设计需求：

Border(bottom: BorderSide(
  width: 4,
  color: Colors.blue, // 自定义边框颜色
  style: BorderStyle.solid // 可选：solid/dashed/dotted
))

2. 实现其他单侧边框
   如果需要顶部、左侧或右侧的单侧边框，直接修改Border的对应属性即可：

• 顶部边框：Border(top: BorderSide(width:4, color: Colors.red))
• 左侧边框：Border(left: BorderSide(width:4, color: Colors.green))
• 右侧边框：Border(right: BorderSide(width:4, color: Colors.orange))

3. 结合主题色的优化写法
   可以用主题色代替固定颜色，让样式更适配全局主题：

decoration: BoxDecoration(
  border: selectedTab == 2 
      ? Border(
          bottom: BorderSide(
            width: 4,
            color: Theme.of(context).primaryColor, // 适配当前主题色
          ),
        )
      : null,
),

4. 带圆角的单侧边框（可选）
   如果需要单侧边框和圆角结合，注意隐藏其他边的边框避免冲突：

decoration: BoxDecoration(
  borderRadius: BorderRadius.only(
    bottomLeft: Radius.circular(8),
    bottomRight: Radius.circular(8),
  ),
  border: selectedTab == 2 
      ? Border(
          bottom: BorderSide(width:4, color: Colors.blue),
          left: BorderSide(width:0),
          right: BorderSide(width:0),
          top: BorderSide(width:0),
        )
      : null,
),

你的初始代码逻辑没问题，根据设计图调整颜色、宽度等参数就能达到预期效果。

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