Kavantix/sliver_tools

Multiple SliverPinnedHeader overlapping

Closed this issue · 2 comments

I have a CustomScrollView of pinned years and sibling pinned months followed a SliverList with ListTiles for each month (shown here with an empty SizedBox). The issue I'm having is that year and month overlap each other when month reaches the top of the scaffold (where year is pinned)

overlapping_sliverpinnedheader

This is the basic structure of the page (leaving out all the minor details for brevity sake):

class Page extends StatelessWidget {
  const Page({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [
      SliverMainAxisGroup(slivers: [
        SliverPinnedHeader(child: Text('2024')),
        SliverMainAxisGroup(slivers: [
          SliverPinnedHeader(child: Text('April')),
          SliverList.list(children: [ SizedBox(height: 40)])
        ])
      ])
    ]);
  }
}

How can I get the SliverPinnedHeaders to not overlap at the same leading edge? Is there a way to force a SliverPinnedHeader to stop at the previous SliverPinnedHeader's bottom?
overlapping_sliverpinnedheader_guidelines

I was able to get it looking as I wanted by adding MultiSliver within each SliverMainAxisGroup.

class Page extends StatelessWidget {
  const Page({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [
      SliverMainAxisGroup(slivers: [
        MultiSliver(children: [
          SliverPinnedHeader(
              child: Container(color: Colors.white, child: Text('2024'))),
          SliverMainAxisGroup(slivers: [
            MultiSliver(children: [
              SliverPinnedHeader(
                  child: Container(color: Colors.white, child: Text('April'))),
              SliverList.list(children: [SizedBox(height: 40)])
            ])
          ])
        ])
      ])
    ]);
  }
}

sliverpinnedheader_nonoverlapping

Is this the best way to do this? Please advise if there is a more efficient way to do this.

If this is fine, please go ahead and close this issue.

Thank you for this package!

After some tinkering, it dawned on me that MultiSliver handles my usecase with the pushPinnedChildren property. For some reason, I thought I had to use SliverPersistentHeader for pushPinnedChildren to work. I didn't need SliverMainAxisGroup at all.