Flutter中如何设置带圆角的AppBar背景透明并解决占位问题？

你遇到的问题是因为shape属性仅改变了AppBar背景的绘制形状，但AppBar本身仍占据矩形屏幕空间，默认背景色会填充整个矩形区域，导致圆角“空缺”部分挡住背后的图片。可以通过以下两种方式解决：

方法一：设置AppBar背景透明+调整shape #

直接将AppBar的背景设为透明并移除阴影，让圆角裁剪后的空白区域透出背后内容：

AppBar(
  backgroundColor: Colors.transparent, // 设置为透明
  elevation: 0, // 移除阴影，避免圆角边缘出现多余阴影
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
  ),
  title: const Text("你的标题"),
  actions: [
    IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
  ],
)

方法二：自定义带圆角的有色区域 #

如果需要保留AppBar主体颜色，同时让圆角外区域透明，可用ClipRRect包裹有色容器作为AppBar的flexibleSpace：

AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  preferredSize: const Size.fromHeight(kToolbarHeight),
  flexibleSpace: ClipRRect(
    borderRadius: const BorderRadius.vertical(bottom: Radius.circular(20)),
    child: Container(
      color: Colors.blue, // 设置你需要的AppBar主色
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.only(left: 16),
      child: const Text(
        "自定义标题",
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
    ),
  ),
  actions: [
    IconButton(icon: const Icon(Icons.search), onPressed: () {}),
  ],
)

这两种方式都能让AppBar的圆角裁剪区域变为透明，背后的图片可正常显示，同时保留AppBar的功能组件（标题、按钮等）。

内容的提问来源于stack exchange，提问作者Fabio Apolinário