使用Sliver App Bar时出现异常细线的问题求助

我在使用可展开的SliverAppBar时，屏幕底部出现了一条意外的细线。尝试过在底部添加黑色容器的Stack来消除，但这个方法导致SliverAppBar的拉伸功能失效，求更好的解决办法？

我的代码： #

SliverAppBar(
              collapsedHeight: 140,
              expandedHeight: 250,
              stretch: true,
              //can use onStretchTrigger to implement refresh on stretch
              backgroundColor: Colors.black38,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 25.0),
                      child: Text(
                        textAlign: TextAlign.center,
                        barName,
                        style: GoogleFonts.bebasNeue(
                          fontSize: 60,
                          height: 1,
                        ),
                      ),
                    ),
                    Container(
                      height: 20,
                      decoration: BoxDecoration(
                        color: Color.fromRGBO(25, 25, 25, 1),
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(30),
                            topLeft: Radius.circular(30)),
                      ),
                    ),
                  ],
                ),
              ),
              flexibleSpace: FlexibleSpaceBar(
                stretchModes: [
                  StretchMode.zoomBackground,
                  StretchMode.blurBackground
                ],
                background: Image.asset(
                  barImagePath,
                  width: double.maxFinite,
                  fit: BoxFit.cover,
                  opacity: const AlwaysStoppedAnimation(.4),
                ),
                // Stack(
                //   alignment: Alignment.bottomCenter,
                //   children: [
                //     Image.asset(
                //       barImagePath,
                //       width: double.maxFinite,
                //       fit: BoxFit.cover,
                //       opacity: const AlwaysStoppedAnimation(.4),
                //     ),
                //     Container(height: 2, color: Color.fromRGBO(25, 25, 25, 1)),
                //   ],
                // ),
              ),
            ),

问题截图： #

解决建议： #

方法1：在FlexibleSpaceBar的背景内添加底部遮条（不影响拉伸）

把你之前注释的Stack放回flexibleSpace的background里，遮条会跟着背景一起拉伸，不会破坏SliverAppBar的拉伸功能。调整后的代码如下：

flexibleSpace: FlexibleSpaceBar(
  stretchModes: [
    StretchMode.zoomBackground,
    StretchMode.blurBackground
  ],
  background: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      Image.asset(
        barImagePath,
        width: double.maxFinite,
        fit: BoxFit.cover,
        opacity: const AlwaysStoppedAnimation(.4),
      ),
      // 底部遮条，高度设为2足够覆盖细线
      Container(height: 2, color: Color.fromRGBO(25, 25, 25, 1)),
    ],
  ),
),

方法2：统一颜色消除色差

细线可能是因为SliverAppBar的backgroundColor和下方Container的颜色存在细微差异导致的。把SliverAppBar的backgroundColor改成和底部Container完全一致的颜色：

backgroundColor: Color.fromRGBO(25, 25, 25, 1),

方法3：移除不必要的阴影/ elevation

如果细线是由SliverAppBar的阴影导致的，可以设置elevation: 0和shadowColor: Colors.transparent来消除：

SliverAppBar(
  elevation: 0,
  shadowColor: Colors.transparent,
  // 其他原有属性...
)

方法4：给底部Container添加负margin覆盖细线

在底部的圆角Container上添加margin: EdgeInsets.only(top: -1)，让它向上覆盖1像素，刚好遮住细线，同时不影响拉伸：

Container(
  height: 20,
  margin: EdgeInsets.only(top: -1), // 添加这一行
  decoration: BoxDecoration(
    color: Color.fromRGBO(25, 25, 25, 1),
    borderRadius: BorderRadius.only(
        topRight: Radius.circular(30),
        topLeft: Radius.circular(30)),
  ),
),

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