Sticky headers on SliverList

Question

I've seen new flutter video and seen some interesting. (It's not typical sticky header or expandable list, so I don't know how to name it)

Video - watch from 0:20

Does anybody know how can I create such type of list with headers using SliverList?

Answer 1

SliverPersistentHeader is the more generic widget behind SliverAppBar that you can use.

SliverPersistentHeader(
    delegate: SectionHeaderDelegate("Section B"),
    pinned: true,
),

And the SectionHeaderDelegate can be implement with something like:

class SectionHeaderDelegate extends SliverPersistentHeaderDelegate {
  final String title;
  final double height;

  SectionHeaderDelegate(this.title, [this.height = 50]);

  @override
  Widget build(context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Theme.of(context).primaryColor,
      alignment: Alignment.center,
      child: Text(title),
    );
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => false;
}