如何为Flutter TabBar中未选中的标签添加侧边分隔边框

你之前的写法仅给中间的Live标签单独加边框，选中态indicator的边框和未选中态的标签边框无法自然衔接，切换时就会出现空白断层，可按对应场景修改代码：

方案1：Flutter 3.10+ 版本（最优解） #

直接使用TabBar原生的divider属性实现常驻分割线，不用单独给标签加边框：

Container(
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: lightGrey),
  ),
  child: TabBar(
    // 新增常驻分割线配置
    divider: BorderSide(color: lightGrey, width: 1),
    dividerHeight: 1,
    indicator: BoxDecoration(
      color: Colors.green,
    ),
    labelStyle: body14_500(Colors.white),
    unselectedLabelStyle: body14_500(dark3),
    indicatorColor: white,
    labelPadding: EdgeInsets.symmetric(horizontal: 24),
    unselectedLabelColor: dark3,
    labelColor: Colors.white,
    tabs: [
      Tab(text: "Upcoming"),
      Tab(text: "Live"),
      Tab(text: "Completed"),
    ],
  ),
)

方案2：Flutter 3.10以下 兼容方案 #

低版本没有divider属性的情况下，给前两个标签加右侧边框即可：

Container(
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: lightGrey),
  ),
  child: TabBar(
    indicator: BoxDecoration(
      color: Colors.green,
    ),
    labelStyle: body14_500(Colors.white),
    unselectedLabelStyle: body14_500(dark3),
    indicatorColor: white,
    labelPadding: EdgeInsets.symmetric(horizontal: 24),
    unselectedLabelColor: dark3,
    labelColor: Colors.white,
    tabs: [
      Container(
        decoration: BoxDecoration(
          border: Border(right: BorderSide(color: lightGrey)),
        ),
        child: Tab(text: "Upcoming"),
      ),
      Container(
        decoration: BoxDecoration(
          border: Border(right: BorderSide(color: lightGrey)),
        ),
        child: Tab(text: "Live"),
      ),
      Tab(text: "Completed"),
    ],
  ),
)

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