Блог

Кто знает, как получить закругленную панель 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;
        },
      ),
    ),
  ),
),
  

Для достижения желаемого поведения вы можете обернуть свой FlexibleSpaceBar с помощью ClipRRect и придать ему круговую границу:

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