Flutter TabBar指示器下方多余横线无法移除问题求助

你遇到的这条横线不是指示器的一部分，而是TabBar自带的分割线（Divider）——哪怕你设置了indicatorWeight: 0，这条分割线还是会默认显示。下面是两种简单有效的解决办法：

方法一：直接隐藏分割线 #

给TabBar添加dividerHeight: 0属性，让分割线的高度变为0，彻底消失：

TabBar(
  dividerHeight: 0, // 新增这一行
  indicatorColor: AppColor.pinkColor,
  indicator: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(20),
      color: AppColor.pinkColor),
  indicatorSize: TabBarIndicatorSize.tab,
  indicatorWeight: 0,
  splashBorderRadius: BorderRadius.circular(20),
  splashFactory: InkRipple.splashFactory,
  controller: _tabController,
  automaticIndicatorColorAdjustment: true,
  overlayColor: MaterialStatePropertyAll(AppColor.pinkColor),
  unselectedLabelStyle: GoogleFonts.poppins(
    fontSize: 14,
    fontWeight: FontWeight.w400,
  ),
  labelColor: AppColor.blackColor,
  labelStyle: GoogleFonts.poppins(
    fontSize: 14,
    fontWeight: FontWeight.w400,
  ),
  tabs: [
    Tab(text: 'Edit Profile'),
    Tab(text: 'Preview Profile'),
  ],
)

方法二：将分割线设为透明 #

如果需要保留分割线的高度但隐藏视觉效果，可以设置dividerColor为透明色：

TabBar(
  dividerColor: Colors.transparent, // 新增这一行
  // 其余属性保持不变
)

看你的代码，TabBar是嵌套在自定义Container里的，不是AppBar的底部组件，所以上面两种方法都能直接生效。测试一下，添加后那条横线就会消失了。

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