flutter - Rounded 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;
        },
      ),
    ),
  ),
),

标签： flutter

Answer 1

要实现所需的行为，您可以使用ClipRRect包装您的FlexibleSpaceBar并给它一个圆形 BorderRadius：

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