Search code examples
fluttertabbartabviewnestedscrollviewflutter-appbar

How to show only the TabView in a SilverAppBar


I'd basically like to have a TabView navigation in the middle of my page. To do so I used a SliverAppBar inside a NestedScrollView. My SliverAppBar is only composed by my TabView, I wrapped my TabView inside a SliverAppBar in order to used the pinned: true propriety.

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
                child: Container(
              height: 500,
              color: Colors.red,
            )),

          SliverAppBar(
              pinned: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              )),

          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageExample(),
            PageExample(),
          ],
          controller: _tabController,
        ),
      ),
    );

It does the trick, my problem is I'd like to hide/remove this SliverAppBar that wrapped my TabBar:

enter image description here


Solution

  • I needed to set expandedHeight to 0:

    return Scaffold( appBar: AppBar( title: Text('Title'), ), body: NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
                child: Container(
              height: 500,
              color: Colors.red,
            )),
    
          SliverAppBar(
              expandedHeight: 0,
              pinned: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              )),
    
          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageExample(),
            PageExample(),
          ],
          controller: _tabController,
        ),
      ),
    );