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: