Flutter实现带渐变背景的圆角底部AppBar问题求助

核心问题是flexibleSpace会默认填充整个AppBar区域，覆盖shape设置的圆角裁剪效果，不用自定义AppBar的话，可以通过以下步骤解决：

• 把AppBar的backgroundColor设为透明，让渐变背景完全由flexibleSpace控制
• 在flexibleSpace中嵌套一个Container，给这个Container设置渐变装饰，同时添加和AppBar的shape完全一致的圆角
• AppBar本身保留shape设置的圆角，保证整体的裁剪逻辑一致

完整代码示例：

AppBar(
  elevation: 4, // 可选：保留阴影效果
  // 定义底部圆角
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
  ),
  backgroundColor: Colors.transparent, // 关键：让AppBar背景透明
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      // 渐变背景
      gradient: LinearGradient(
        colors: [Colors.blueAccent, Colors.purpleAccent],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      // 和AppBar shape完全匹配的圆角
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    ),
  ),
  // 添加底部内容（需用PreferredSize包裹）
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(80),
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Card(
        child: Center(
          child: Text("底部卡片内容"),
        ),
      ),
    ),
  ),
)

原理说明：
AppBar的shape负责整体的区域裁剪，而透明背景让flexibleSpace里的渐变容器成为实际的背景层，两者用完全一致的圆角参数，就能保证渐变背景贴合圆角区域，同时bottom属性的内容也能正常显示在AppBar的底部区域。

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