Flutter中如何设计底部带固定圆角弧度的AppBar

以下是几种能快速实现AppBar底部圆角的方法，适配常见的Flutter场景：

方法一：直接利用AppBar的shape属性 #

这是最简洁的方式，通过shape参数指定圆角：

AppBar(
  title: Text("带底部圆角的AppBar"),
  backgroundColor: Colors.blue,
  elevation: 4,
  // 设置底部左右圆角
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(20.0),
      bottomRight: Radius.circular(20.0),
    ),
  ),
)

注意：如果开启了elevation，阴影可能会超出圆角范围，若想保留阴影且不溢出，可以结合下方的Container阴影方案。

方法二：用ClipRRect包裹AppBar #

通过裁剪组件实现圆角，适合需要完全控制裁剪范围的场景：

ClipRRect(
  borderRadius: BorderRadius.only(
    bottomLeft: Radius.circular(20),
    bottomRight: Radius.circular(20),
  ),
  child: AppBar(
    title: Text("带圆角的AppBar"),
    backgroundColor: Colors.blue,
    elevation: 0, // 关闭默认阴影，避免圆角外出现残留阴影
  ),
)

方法三：自定义带阴影的圆角AppBar #

如果需要保留阴影且阴影不超出圆角，可通过Container自定义阴影后包裹AppBar：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3), // 控制阴影偏移方向
      ),
    ],
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
    child: AppBar(
      title: Text("带阴影和圆角的AppBar"),
      backgroundColor: Colors.blue,
      elevation: 0, // 关闭AppBar自带阴影
    ),
  ),
)

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