Flutter：设置AppBar elevation时顶部出现视觉伪影的解决求助

方法一：自定义带底部阴影的容器包裹AppBar #

将原生AppBar的elevation设为0，用带底部定向阴影的Container包裹它，精准控制阴影仅出现在底部，彻底避免顶部伪影：

修改你的appBar代码段：

appBar: Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3), // 匹配原生elevation的阴影色调
        spreadRadius: 0,
        blurRadius: 3, // 对应原elevation:3的模糊程度
        offset: const Offset(0, 2), // 仅向下偏移，生成底部阴影
      ),
    ],
  ),
  child: AppBar(
    elevation: 0, // 关闭原生自带阴影
    centerTitle: true,
    leading: ValueListenableBuilder(
        valueListenable: transactionsShowing,
        builder: ((context, value, child) =>
            (transactionsShowing.value == 1)
                ? IconButton(
                    padding: const EdgeInsets.only(top: 0),
                    onPressed: () {
                      Navigator.of(navigatorKey.currentContext!)
                          .maybePop({transactionsShowing.value = 0});
                      viewingTransactionID = -1;
                      viewingTransactionType = "";
                    },
                    icon: const Icon(
                      Icons.arrow_back,
                      size: 32,
                    ))
                : const SizedBox())),
    title: const Padding(
        padding: EdgeInsets.only(top: 0), child: Text("Envilo")),
    actions: [
      Transform.translate(
          offset: const Offset(0, -12),
          child: Container(
              alignment: Alignment.topCenter,
              padding: const EdgeInsets.only(right: 0),
              child: IconButton(
                  icon: const Icon(Icons.menu),
                  onPressed: () => {
                        (_key.currentState!.isEndDrawerOpen)
                            ? _key.currentState!.closeEndDrawer()
                            : _key.currentState!.openEndDrawer()
                      })))
    ],
  ),
),

同时保持appBarTheme中的elevation:0，避免样式冲突。

方法二：用ClipPath裁剪顶部阴影区域 #

如果想保留原生AppBar的交互特性，可通过裁剪器剪掉顶部1像素的阴影区域，精准去除伪影：

首先在_MainPageState类中定义裁剪器：

class _AppBarTopClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从顶部1像素位置开始绘制路径，裁剪掉最顶部的阴影区域
    path.moveTo(0, 1);
    path.lineTo(size.width, 1);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

然后修改appBar部分：

appBar: ClipPath(
  clipper: _AppBarTopClipper(),
  child: AppBar(
    elevation: 3, // 保留原生底部阴影
    // 其他原有配置不变
  ),
),

方法三：消除颜色边界差 #

如果伪影是SafeArea容器与AppBar的颜色细微差异导致的，将最外层容器颜色设为与AppBar完全一致：

return Container(
    color: navBarBG, // 直接复用AppBar背景色，消除视觉边界
    child: SafeArea(
        // 原有代码不变
    )
);

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