How to create a bounded scrollable TabBarView

Question

I need to implement the following layout in Flutter.

When the user scrolls, I want the entire layout to scroll (hiding the header and tab bar). However, I can't nest a TabBarView inside a ListView since the TabBarView doesn't have a bounded height and ListViews don't provide a bounded height to their children.

I've already seen these questions, but all of them have unsatisfactory answers for this use case:

How can I have a TabView with variable height content within a Scrollable View with Flutter? : Exactly what I needed, but the only answer doesn't provide any concrete code on how to implement this, only a reference to a feature (SliverList) that I can't figure out how to implement.
how to implement a sliverAppBar with a tabBar : The provided code doesn't work since the SliverList doesn't accept a constructor with this shape (and I tried adapting it to use a delegate without success).
Getting 'Horizontal viewport was given unbounded height.' with TabBarView in flutter : This use case doesn't work for me since I need the entire layout to scroll, and in that answer, the header is fixed to the top.

score 22 · Accepted Answer · answered Dec 12 '18 at 23:54

class SliverWithTabBar extends StatefulWidget {
  @override
  _SliverWithTabBarState createState() => _SliverWithTabBarState();
}

class _SliverWithTabBarState extends State<SliverWithTabBar> with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              pinned: false,
              backgroundColor: Colors.white,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 200.0,
                      width: double.infinity,
                      color: Colors.grey,
                      child: FlutterLogo(),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text(
                        'Business Office',
                        style: TextStyle(fontSize: 25.0),
                        textAlign: TextAlign.left,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text(
                        'Open now\nStreet Address, 299\nCity, State',
                        style: TextStyle(fontSize: 15.0),
                        textAlign: TextAlign.left,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(right: 10.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Icon(Icons.share),
                          Padding(
                            padding: const EdgeInsets.only(left: 10.0),
                            child: Icon(Icons.favorite),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              expandedHeight: 380.0,
              bottom: TabBar(
                indicatorColor: Colors.black,
                labelColor: Colors.black,
                tabs: [
                  Tab(text: 'POSTS'),
                  Tab(text: 'DETAILS'),
                  Tab(text: 'FOLLOWERS'),
                ],
                controller: controller,
              ),
            )
          ];
        },
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              color: index % 2 == 0 ? Colors.blue : Colors.green,
              child: Container(
                alignment: Alignment.center,
                width: double.infinity,
                height: 100.0,
                child: Text(
                  'Flutter is awesome',
                  style: TextStyle(fontSize: 18.0),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

You should look for Sliver widgets to achieve NestedScrollView.

That gives you a headerSliverBuilder property where you can actually fit some headers that you might hide or pin on the top of the screen when the body widget is scrolled, in this particular example, a ListView.

You might want to take a look to the RenderSliver documentation.

Thank you so much, this worked perfectly! I was finding a bit hard to wrap my head around slivers, but your example made it much clearer to me. I wish the docs had examples like these! — Ozymas, Dec 13 '18 at 09:32
Thank you bro. but I can't do the scrolling tab? i have set isScrollable: true — Kitereative Indonesia, Jun 10 '19 at 16:42
For TabBar's Tabs to work perfect,...use TabBarView in NestedScrollView's body.... — Darshan Rathod, Jul 30 '20 at 07:28
This is actually not right IMO! You've put a ListView in the body of NestedScrollView. The TabBar in the header section is useless until you have a TabBarView. But: if you put the TabBarView as the body -> You will run into these problems: TabBarView needs a bounded height! (It doesn't automatically take up the remaining space, and you even can't use an Extended widget to extend the height in a column). Each Tab content has different length (in height) so you can't choose a specific height even. — Shamshun, Sep 08 '21 at 15:11

score 3 · Answer 2 · answered Nov 05 '20 at 02:16

On top of Miguel Ruvio's answer replacing the ListView in the body with the TabBarView gets you almost all of the way per D.R.'s comment. I did get some overflow issues when one of my widgets in the was wrapped in a column. Replacing that with ListView per this example

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Tabs()));
}

class Tabs extends StatefulWidget {
  @override
  _RoomTabsState createState() => _RoomTabsState();
}

class _RoomTabsState extends State<Tabs> with TickerProviderStateMixin {
  var _scrollViewController;
  var _tabController;

  @override
  void initState() {
    super.initState();
    _scrollViewController = ScrollController();
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      controller: _scrollViewController,
      headerSliverBuilder: (context, bool) => [
        SliverAppBar(
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: "All"),
              Tab(text: "Living room"),
            ],
          ),
        ),
      ],
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(children: [
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
          ]),
          Text("test"),
        ],
      ),
    );
  }
}

comming from this github issue.

It worked. Wrapping each child in `ListView` removes overflows. — Michał Dobi Dobrzański, Feb 20 '23 at 15:28
Great answer! It works wrapping the children of the Tabview in a Listview. Note: Your Columns and Rows in the Listview should be set to MainAxisSize.min. — Godwin Mathias, Aug 30 '23 at 09:47

score 2 · Answer 3 · edited Apr 16 '22 at 07:00

Please try this code below:

     NestedScrollView(
      headerSliverBuilder: (context, value) {
        return [
          SliverToBoxAdapter(
              child: Header()
          ),
          SliverToBoxAdapter(
            child: TabBar(
              controller: _controller,
              tabs: [
                Tab(icon: Icon(Icons.x)),
                Tab(icon: Icon(Icons.y)),
                Tab(icon: Icon(Icons.z)),
              ],
            ),
          ),
        ];
      },
    body: Container(
      child: TabBarView(
        controller: _controller,
        children: <Widget>[
          page1(),
          page2(),
          page3(),
        ],
      ),
    ),
  )

It makes overflows on Debug run :( – Michał Dobi Dobrzański Feb 20 '23 at 15:24 — Michał Dobi Dobrzański, Feb 20 '23 at 15:24

How to create a bounded scrollable TabBarView

3 Answers3

Linked