Flutter APP滚动页面时如何移除AppBar头部下方的黑线（iOS&Android）

以下是针对iOS和Android平台的几种有效解决方法：

方法一：移除AppBar阴影（通用方案） #

直接给AppBar设置elevation: 0，彻底消除阴影效果，黑线会随之消失：

AppBar(
  elevation: 0, // 移除阴影
  title: const Text("页面标题"),
)

如果需要保留部分场景的阴影逻辑，也可以将shadowColor设为透明，让阴影不显示：

AppBar(
  shadowColor: Colors.transparent, // 阴影透明化
  title: const Text("页面标题"),
)

方法二：适配滚动场景（如NestedScrollView/SliverAppBar） #

当使用滚动组件（如NestedScrollView、ListView）配合SliverAppBar时，除了设置elevation: 0，还可以通过以下方式确保黑线消失：

SliverAppBar(
  pinned: true,
  elevation: 0,
  shadowColor: Colors.transparent,
  title: const Text("滚动页面"),
)

如果是普通Scaffold配合滚动组件，可添加extendBodyBehindAppBar: true属性，同时确保AppBar背景不透明：

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.white, // 确保背景不透明
    shadowColor: Colors.transparent,
  ),
  body: ListView(
    children: [/* 滚动内容 */],
  ),
)

方法三：iOS平台特殊处理 #

部分iOS场景下，黑线可能来自原生导航栏的底部边框，可以通过设置AppBar的bottom属性来覆盖：

AppBar(
  elevation: 0,
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(0),
    child: SizedBox.shrink(), // 移除底部占位
  ),
  title: const Text("iOS适配"),
)

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