Flutter TabBar下方出现莫名灰色线条如何解决？

这条灰色线条是TabBar组件默认的分割线，可以通过以下两种方式消除：

方法一：设置TabBar的分割线颜色为透明 #

直接在TabBar组件中添加dividerColor: Colors.transparent属性，覆盖默认的分割线颜色：

TabBar(
  splashBorderRadius: null,
  controller: _tabController,
  indicatorColor: Colors.deepPurple,
  indicatorWeight: 5,
  dividerColor: Colors.transparent, // 添加此行隐藏分割线
  tabs: [
    Tab(text: 'Log in'),
    Tab(text: 'Sign up'),
  ],
),

方法二：直接隐藏分割线（Flutter 3.13+适用） #

如果你的Flutter版本在3.13及以上，可通过dividerHeight: 0属性直接隐藏分割线：

TabBar(
  splashBorderRadius: null,
  controller: _tabController,
  indicatorColor: Colors.deepPurple,
  indicatorWeight: 5,
  dividerHeight: 0, // 添加此行隐藏分割线
  tabs: [
    Tab(text: 'Log in'),
    Tab(text: 'Sign up'),
  ],
),

额外检查：统一页面背景色 #

若上述方法无效，检查Loginpage和Newaccountpage的根容器背景色是否与TabBar所在的Colors.grey[900]一致，避免因背景色差异造成视觉上的线条感。示例：

class Loginpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[900], // 与TabBar背景色统一
      child: // 页面内容
    );
  }
}

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