Flutter Sliver Sticky Header hide content behind rounded corners

Question

I implemented a SliverStickyHeader which is working just fine within my CustomScrollView. I only have one problem:

My Sticky header is basically a Container with borderRadius. Now I want my content to hide behind that sliver so only the Scaffold backgorund is visible. Here is an image for clarification:

As you can see the white Container is visible behind the blue SliverStickyHeader.

I am stuck here and have no clue if this is even possible. Happy for every help, even if it's hacky :D Would love to make it work.

Hiding the Content of my Sliver behind the Header. That's the goal.

Let me know if you need any more information.

Answer 1

Adding it inside the delegate is working for me:

class WishlistSliverPersistentHeaderDelegate
    extends SliverPersistentHeaderDelegate {
  ...

  WishlistSliverPersistentHeaderDelegate({
    ...
  });

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    final t = shrinkOffset / (maxExtent);
    final collapsedOffset = ui.lerpDouble(0, 1, t)!;
    final collapsedOffsetSafe = collapsedOffset.safeOpacity;
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Expanded(
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              _buildHeader(context, t),
              ...
              _builderBorderRadius(context),
            ],
          ),
        ),
      ],
    );
  }

  Positioned _builderBorderRadius(BuildContext context) {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        height: 30,
        decoration: BoxDecoration(
          color: whiteAdaptive(context),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30),
            topRight: Radius.circular(30),
          ),
        ),
      ),
    );
  }