How to make Sliver headers sticky inside other Sliver

Question

I am trying to make nested Sliver headers sticky.

I am unable to make the 'today' header sticky under the 'bruh' header(which is sticky). make it feel like some collapsing headers.

can someone kindly give a hand

class ListExample extends StatelessWidget {
  const ListExample({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      title: 'List Example',
      slivers: [
        SliverToBoxAdapter(child: SoldEntryPage(),),
        _StickyHeaderDateSort(index: 34),
      ],
    );
  }
}

class _StickyHeaderDateSort extends StatelessWidget {
  const _StickyHeaderDateSort({
    Key key,
    this.index,
  }) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      header: HeaderDatePicker(),  // this the 'bruh' sticky header
      sliver: SliverToBoxAdapter(
          child: ShrinkWrappingViewport(   // THis me trying to nest silvers
            offset: ViewportOffset.zero(),
            slivers: [
              _StickyHeaderList(index: 10),
              _StickyHeaderList(index: 11),],
          ),
        ),
    );
  }
}

this is what most of that code is doing

user_14510989 · Answer

Lists inside lists isn’t what you want. I created a package sliver_tools that introduces a MultiSliver widget that should allow you to achieve what you want.

Every section with a sticky header should be a multi sliver with a SliverPinnedHeader and a SliverList. Then setting pushPinnedChildren to true should give the sticky header effect you’re looking for.

user_6098780 · Answer

Using a modified flutter_sticky_header you can achieve this, even several level's deep. The modified version can be found here: pull request.

You can use the modified version with:

dependency_overrides:
  flutter_sticky_header:
    git:
      url: https://github.com/UnderKoen/flutter_sticky_header.git
      ref: master

An example:

CustomScrollView(
  slivers: List.generate(
    10,
    (i) => SliverStickyHeader(
      header: Text('Main Group $i'),
      slivers: List.generate(
        10,
        (j) => SliverStickyHeader(
          header: Text('Sub Group $j'),
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, k) => Text('Record $k'),
                childCount: 10,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
)

This is an copy of this answer by me.

How to make Sliver headers sticky inside other Sliver

2 Answers