Tab Bar doesn't scroll in inside Sliver Persistent Header

Viewed 211

I'm trying to get a scrollable TabBar working inside a Sliver Persistent Header. The tabs are clickable, but I cannot scroll through the tabs. Am I doing something wrong? I'm using the latest version of flutter, building on iPhone simulator.

SliverPersistentHeader Delegate Class


class SliverTabBarHeader extends SliverPersistentHeaderDelegate {
  final TabBar tabBar;
  final Color color;

  const SliverTabBarHeader({
    Color color = Colors.transparent,
    required this.tabBar,
  }) : this.color = color;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Container(
          color: Colors.white,
        ),
        Positioned(
          child: tabBar,
          bottom: 20,
        ),
      ],
    );
  }

  @override
  double get maxExtent => tabBar.preferredSize.height + 70;

  @override
  double get minExtent => tabBar.preferredSize.height + 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

Sliver Persistent Header Implementation

SliverPersistentHeader(
      delegate: SliverTabBarHeader(
        tabBar: TabBar(
          indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(),
            color: Colors.yellow[400],
          ),
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          isScrollable: true,
          unselectedLabelColor: Colors.black,
          labelColor: Colors.black,
          tabs: [
            tabItem(tabName: "All"),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
            tabItem(tabName: "Pizza", icon: Icons.ac_unit),
          ],
          controller: _tabController,
        ),
      ),
      floating: true,
    );
1 Answers

You can use SliverAppBar instead of SliverPersistentHeader and give TabBar as a title to SliverAppBar for example:

 SliverAppBar(
          automaticallyImplyLeading: false,
          title:  TabBar(
      indicator: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(),
        color: Colors.yellow[400],
      ),
      padding: EdgeInsets.symmetric(horizontal: 20.0),
      isScrollable: true,
      unselectedLabelColor: Colors.black,
      labelColor: Colors.black,
      tabs: [
        tabItem(tabName: "All"),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
        tabItem(tabName: "Pizza", icon: Icons.ac_unit),
      ],
      controller: _tabController,
   ),
   pinned: true,
);
Related