I want to implement a float AppBar with a pinned TabBar at the bottom. The following is the test code ( dartPad ):
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.yellow,
title: Text(
"WhatsApp type sliver appbar",
),
centerTitle: true,
pinned: true,
floating: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
color: Colors.orange,
alignment: Alignment.topLeft,
child: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
labelPadding: EdgeInsets.only(
top: 13, bottom: 13, left: 16, right: 16),
tabs: [
Text(
"TAB A",
),
Text(
"TAB B",
),
]),
),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
I find that it will have a top-padding on the TabBar when scrolling down. Is there any way to remove that space? I have set the SliverAppBar's toolbarheight, but that space will keep there even I lower the height.
Just set property pinned: false
See documentation
pinned → bool Whether the app bar should remain visible at the start of the scroll view. [...] final
Also remove tabBar from bottom: and add it above tabbarview inside a column
Thank you for the help.
Finally, I have another solution that may also take consider. I post here for others to ref.
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.yellow,
title: Text(
"WhatsApp type sliver appbar",
),
elevation: 0.0,
forceElevated: false,
pinned: false,
floating: true,
primary: false,
centerTitle: false,
titleSpacing: NavigationToolbar.kMiddleSpacing,
automaticallyImplyLeading: false,
),
SliverAppBar(
backgroundColor: Colors.orange,
pinned: true,
primary: false,
centerTitle: false,
titleSpacing: 0,
toolbarHeight: 48,
automaticallyImplyLeading: false,
forceElevated: true,
title: Align(
alignment: Alignment.topLeft,
child: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
labelPadding: EdgeInsets.only(
top: 13, bottom: 13, left: 16, right: 16),
tabs: [
Text(
"TAB A",
),
Text(
"TAB B",
),
]),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
Basically, what i do is separate 2 SliverAppBar, one is not pinned and floating; another is pinned. This makes the upper appbar disappear when scroll down and display when scroll up while the tabbar will keep pinning there.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.