Flutter - How to add custom tabbar inside sliverappbar?

Question

I'm trying to implement a custom tab bar widget inside a SliverAppBar. So far I've tried wrapping my CustomTabBar within a PreferredSize widget.

Here's my code:

Widget _buildBody(){
   return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            leading: Container(),
            backgroundColor: Colors.transparent,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Column(
                children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Text(
                      "Item 1"
                    ),
                    Text(
                      "Item 2"
                    ),
                    Text(
                      "Item 3"
                    )
                  ],
                )
              ]),
            ),
          bottom: PreferredSize(
           preferredSize: Size.fromHeight(kToolbarHeight),
           child: CustomTabWidget(
           items: ['Challenge', 'My friends'],
           activeColor: secondaryColor,
           currentIndex: currentIndex,
           backgroundColor: tabColor,
           activeTextColor: Colors.white,
           backgroundTextColor: Colors.white,
           onTabSelect: (int index) {
            onLeaderboardTabSelect(index);
          },
        ),
       ),];
      },
      body: ListView.separated(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('row $index'),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ) // should return listview depending on the tab
    );
}

CustomTabWidget

Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(
          30.0,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: _buildItems(context),
      ),
    );
  }

The code successfully shows the my custom tab bar widget but whenever I scroll down or tap another tab, it disappears.

I might have overlooked something within the code.

Can anyone help me?

score 0 · Answer 1 · answered Oct 30 '19 at 06:01

this work on my project

 class TabBarInSliverAppbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              title: Text("Tabbar in SliverAppbar Example"),
              pinned: true,
              floating: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "First Tab",
                  ),
                  Tab(
                    text: "Second Tab",
                  ),
                ],
              ),
            ),
            SliverToBoxAdapter(
              child: TabBarView(
                children: <Widget>[
                  Center(
                    child: Text("First Tab"),
                  ),
                  Center(
                    child: Text("Second Tab"),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

you can also checki this link :Flutter TabBar and SliverAppBar that hides when you scroll down

Flutter - How to add custom tabbar inside sliverappbar?

1 Answers1