SliverFixedExtendListWithTabs #

A sliver with a pinned tab bar over a fixed-extent list of sections — the pattern behind restaurant menus and catalogue screens. The tab bar follows the scroll position, tapping a tab scrolls to its section, and a footer fills the gap under a last section that is too short to reach the top.

https://github.com/Bomsamdi/sliver_fixed_extend_list_with_tabs/assets/94292009/0c8626a6-7e46-4213-b11b-427ad4536e55

Installation #

dependencies:
  sliver_fixed_extend_list_with_tabs: ^1.0.0

Requires Dart 3.8 / Flutter 3.32 or newer.

Usage #

Describe your rows by extending HeaderItem and ChildItem, then hand the sections over. Scroll offsets are computed for you.

class Course extends HeaderItem {
  const Course({required super.key, required this.name, required super.tabLabel});
  final String name;
}

class Dish extends ChildItem {
  const Dish({required super.key, required this.name});
  final String name;
}

CustomScrollView(
  controller: _controller,
  slivers: <Widget>[
    const SliverAppBar(pinned: true, title: Text('Menu')),
    SliverFixedExtendListWithTabs(
      controller: _controller,
      listItemHeight: 64,
      sections: sections,
      headerBuilder: (context, item) => Text((item as Course).name),
      childBuilder: (context, item) => Text((item as Dish).name),
      onSectionChanged: (index) => setState(() => _section = index),
    ),
  ],
)

The controller must be the same one the enclosing CustomScrollView uses.

Custom tabs #

tabLabel gives the default tab its text. For anything else, build the tab yourself:

SliverFixedExtendListWithTabs(
  tabBuilder: (BuildContext context, HeaderItem item, int index) => Tab(
    icon: Icon(icons[index]),
    text: (item as Course).name,
  ),
  ...
)

Slivers above the list #

If something expandable precedes this sliver — a SliverAppBar with expandedHeight, for instance — tell it how much, so tab taps land in the right place:

SliverFixedExtendListWithTabs(startOffset: 200, ...)

Parameters #

Migrating from 0.0.3 #

• Tabs now show your own label. They used to render an internal debug string (Tab 0 0, Tab 1 11, …) with no way to change it. Pass tabLabel on the header item, or a tabBuilder.
• offsetStart, childrenCount and childrenHeight on HeaderItem are no longer needed. The package computes offsets from the section order and listItemHeight. The parameters still exist, are deprecated and ignored, so existing subclasses keep compiling — you can delete the arithmetic.

License #

MIT.