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.

Miguel Ruivo · Accepted Answer · 2018-12-12 23:54:47Z

22

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.

answered Dec 12, 2018 at 23:54

Miguel Ruivo

18k7 gold badges67 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ozymas Over a year ago

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!

Kitereative Indonesia Over a year ago

Thank you bro. but I can't do the scrolling tab? i have set isScrollable: true

Vinoth Over a year ago

How to swipe the widget from left to right or vice versa?

Darshan Rathod Over a year ago

For TabBar's Tabs to work perfect,...use TabBarView in NestedScrollView's body....

Shamshun Over a year ago

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.

Ryan Palmer · Accepted Answer · 2020-11-05 02:16:10Z

4

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.

answered Nov 5, 2020 at 2:16

Ryan Palmer

1192 silver badges6 bronze badges

2 Comments

Michał Dobi Dobrzański Over a year ago

It worked. Wrapping each child in ListView removes overflows.

Godwin Mathias Over a year ago

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.

nagendra nag · Accepted Answer · 2022-04-16 07:00:54Z

2

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(),
        ],
      ),
    ),
  )

edited Apr 16, 2022 at 7:00

nagendra nag

1,3526 silver badges19 bronze badges

answered Feb 8, 2021 at 6:12

MD MEHEDI HASAN

2,5002 gold badges24 silver badges36 bronze badges

1 Comment

Michał Dobi Dobrzański Over a year ago

It makes overflows on Debug run :(

Collectives™ on Stack Overflow

How to create a bounded scrollable TabBarView

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related