Rounded SliverAppBar background issue

Question

Who knows how to get the rounded SliverAppBar with a correctly clipped background?

• Start position
• The problem
• Collapsed position

Also, it would be great to have the same rounded corners on the start position.

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

To achieve the desired behavior you can wrap your FlexibleSpaceBar with ClipRRect and give it a circular BorderRadius:

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