Flutter中TabBar作为bottomNavigationBar时底部出现白线问题求助

这个白线是TabBar默认渲染的底部分割线，直接通过组件属性就能解决，不需要调整全局主题或背景色，具体处理方案如下：

方案一：设置dividerColor为透明 #

在TabBar组件中添加dividerColor: Colors.transparent，这个属性专门控制TabBar底部的分割线颜色，设为透明即可隐藏这条白线：

修改createTabBar方法中的TabBar代码：

Widget createTabBar(BuildContext context) {
  return Container(
    height: DesignConstants.tabHeight,
    width: Get.width,
    child: TabBar(
      indicator: TopIndicator(),
      controller: homeTabController.tabController,
      labelPadding: EdgeInsets.all(0),
      tabs: homeTabController.tabs,
      dividerColor: Colors.transparent, // 新增此行，隐藏默认底部分割线
    ),
  );
}

方案二：兜底处理（方案一无效时用） #

如果上述方法没解决问题，可能是TabBar依赖的Material组件默认阴影或背景差异导致，给TabBar包裹Material组件并移除阴影、统一背景色：

Widget createTabBar(BuildContext context) {
  return Container(
    height: DesignConstants.tabHeight,
    width: Get.width,
    color: AppColors.appBarColor, // 与Scaffold背景色保持一致
    child: Material(
      elevation: 0, // 移除Material默认阴影
      color: AppColors.appBarColor,
      child: TabBar(
        indicator: TopIndicator(),
        controller: homeTabController.tabController,
        labelPadding: EdgeInsets.all(0),
        tabs: homeTabController.tabs,
        dividerColor: Colors.transparent,
      ),
    ),
  );
}

关于自定义指示器的说明 #

你实现的TopIndicator是在Tab顶部绘制线条，和底部白线无关，无需修改。当前绘制逻辑中drawLine的y坐标为0，确实是在Tab顶部渲染，代码逻辑没有问题。

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