圆形SliverAppBar背景问题

Question

谁知道如何获得具有正确剪裁背景的圆角SliverAppBar？

• 起动位置
• 问题所在
• 塌陷位置

同样，在起点位置有相同的圆角也是很好的。

SliverAppBar(
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(48.0),
    ),
  ),
  backgroundColor: AppColors.primary,
  expandedHeight: 200.0,
  pinned: true,
  stretch: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text(
      plan.title,
      textAlign: TextAlign.center,
    ),
    titlePadding: EdgeInsets.all(16.0),
    centerTitle: true,
    background: ShaderMask(
      shaderCallback: (rect) => LinearGradient(
        colors: [
          Colors.black.withOpacity(0.2),
          Colors.black.withOpacity(0.6),
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ).createShader(rect),
      blendMode: BlendMode.srcATop,
      child: Image.network(
        plan.image,
        width: double.infinity,
        height: 250.0,
        fit: BoxFit.cover,
        loadingBuilder: (_, child, progress) {
          return (progress != null)
              ? Container(
                  height: 250.0,
                  child: Center(
                    child: CircularProgressIndicator(),
                  ),
                )
              : child;
        },
      ),
    ),
  ),
),

Answer 1

为了实现所需的行为，您可以将FlexibleSpaceBar与ClipRRect包装起来，并给它一个循环BorderRadius：

flexibleSpace: ClipRRect(
  borderRadius: BorderRadius.vertical(
    bottom: Radius.circular(20.0),
  ),
  child: FlexibleSpaceBar(
    ...
  ),
),