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)
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?
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)])
])
])
])
])
]);
}
}
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.