Flutter Web端TabBar上方线条/阴影无法移除问题求助

我开发的Flutter UI应用里，TabBar上方莫名出现一条细线（分不清是线条还是阴影），只有Web端显示这个问题——Web端截图里蓝色TabBar上方能看到这条细线，但Chrome移动端和平板显示正常，没有细线。试了两段代码都没搞定：

试过的代码1 #

DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          
          child: new Container(
            color: Theme.of(context).primaryColor,
            child: new SafeArea(
              child: Column(
                children: <Widget>[
                  new Expanded(child: new Container()),
                  new TabBar(
                    labelColor: Colors.white,
                    unselectedLabelColor: Colors.grey[700],
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(icon: Icon(Icons.chat)),
                      Tab(icon: Icon(Icons.filter_alt_outlined)),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
        body: TabBarView(

试过的代码2 #

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          flexibleSpace: SafeArea(
            child: _tabBar,
          ),
          backgroundColor: Theme.of(context).primaryColor,
          elevation: 0,
        ),
        body: TabBarView(

下面是几个能解决的办法：

1. 全局主题里彻底关闭AppBar阴影 #

在ThemeData里给appBarTheme设置阴影透明，同时把elevation设为0：

ThemeData(
  appBarTheme: AppBarTheme(
    elevation: 0,
    shadowColor: Colors.transparent,
  ),
)

2. 用同色容器盖住细线 #

如果全局设置不管用，就在AppBar底部加个和背景色一致的Container，把细线挡住：

AppBar(
  flexibleSpace: SafeArea(
    child: _tabBar,
  ),
  backgroundColor: Theme.of(context).primaryColor,
  elevation: 0,
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(1),
    child: Container(
      color: Theme.of(context).primaryColor,
      height: 1,
    ),
  ),
)

3. 给容器加裁剪行为 #

Flutter Web端有时候会因为渲染精度问题出现细线条，给包裹TabBar的Container加上裁剪属性：

Container(
  color: Theme.of(context).primaryColor,
  clipBehavior: Clip.hardEdge,
  child: new SafeArea(
    // 原有内容
  ),
)

4. 关掉SafeArea的顶部适配 #

如果是SafeArea在Web端产生了不必要的顶部间隙，就把top参数设为false：

SafeArea(
  top: false,
  child: Column(
    // 原有内容
  ),
)

问题原因 #

主要是Flutter Web和移动端的渲染逻辑存在差异，移动端被忽略的细微阴影、边框或渲染间隙，到Web端会被显现出来。哪怕设置了elevation:0，部分浏览器的渲染机制仍可能残留极细微的阴影效果，需要用上面的方法彻底消除。

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