flutterdartstickyflutter-sliver

Flutter Sliver Sticky Header hide content behind rounded corners


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:

enter image description here

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.


Solution

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