圆角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

为了实现所需的行为，您可以用ClipRRect包裹FlexibleSpaceBar，并为其提供圆形边界半径：

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