How to remove empty space in SliverAppBar?
2,825
You can wrap the tab bar with a PreferredSize
widget of height 0:
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context),
sliver: SliverAppBar(
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: TabBar(
controller: _controller,
labelColor: Colors.black,
indicatorColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: _tabs
.map((String name) => Tab(text: name))
.toList()),
),
pinned: true,
floating: false,
expandedHeight: 500,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Container(
child: child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: FontWeight.w500),)))
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
fit: BoxFit.cover,
image: DecorationImage(
image: AssetImage("assets/images/classroom.png")
)
),
)),
Note: I used fit: BoxFit.cover
for the background image, that's why the tab bar has no white background.
Result:
Author by
Kennith
Updated on November 25, 2022Comments
-
Kennith over 1 year
I'm using
NestedScrollView
here and trying to put aTabBar
in thebottom
parameter ofSliverAppBar
which is built in theheaderSliverBuilder
function. TheTabBar
works fine but it looks like theSliverAppBar
has spared thetitle
some space that makes the tab bar looks weird with large padding above it. Any idea how to remove this space? Thanks in advance.@override Widget build(BuildContext context) { double screenWidth = MediaQuery.of(context).size.width; double screenHeight = MediaQuery.of(context).size.height; return Scaffold( body: SafeArea( child: NestedScrollView( headerSliverBuilder: (context, value){ return[ SliverOverlapAbsorber( handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( pinned: true, floating: false, expandedHeight: 500, title: Text("Space that I don't want"), centerTitle: true, flexibleSpace: FlexibleSpaceBar( collapseMode: CollapseMode.pin, background: Container( decoration: BoxDecoration( color: Colors.white, image: DecorationImage( image: AssetImage("assets/images/classroom.png") ) ), child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: FontWeight.w500),))) ), ), bottom: TabBar( controller: _controller, labelColor: Colors.black, indicatorColor: Colors.black, unselectedLabelColor: Colors.grey, tabs: _tabs.map((String name) => Tab(text: name)).toList() ) ) ), ]; }, body: TabBarView( controller: _controller, children: (_tabs.map((String name){ return SafeArea( child:Builder( builder: (BuildContext context){ return CustomScrollView( key: PageStorageKey<String>(name), slivers: <Widget>[ SliverOverlapInjector( handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context), ), SliverToBoxAdapter( child: _buildLeaderBoardTab(screenWidth,screenHeight) ) ], ); }, ) ); })).toList(), ) ) ) ); }