SliverAppBar with TabBar
FlexibleSpaceBar is stacked behind the toolbar and the tabbar. https://docs.flutter.io/flutter/material/SliverAppBar/flexibleSpace.html
You should put your title in SilverAppBar:title not in flexibleSpace.
In your code replace
flexibleSpace: new FlexibleSpaceBar(
title: new Text("Some title"),
),
with
title: new Text("Some title"),
I had the same problem weeks ago and I could solve using SliverAppBar
, FlexibleSpaceBar
and SliverPersistentHeader
.
Check my code
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
)),
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.black87,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(icon: Icon(Icons.info), text: "Tab 1"),
Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"),
],
),
),
pinned: true,
),
];
},
body: Center(
child: Text("Sample text"),
),
),
),
);
}
And this is the implementation of SliverPersistentHeader
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new Container(
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
I wrote a post about it if you want to check :
https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe
You can use titlePadding for padding:
SliverAppBar(
pinned: true,
expandedHeight: 250,
primary: true,
forceElevated: true,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.only(bottom: 62),
title: Text(data.name),
centerTitle: true,
background: data.logo != null
? Padding(
padding: const EdgeInsets.only(bottom: 46),
child: Container(
color: Colors.black,
),
)
: null,
),
bottom: TabBar(
tabs: [
Tab(text: "Tab1"),
Tab(text: "Tab2"),
Tab(text: "Tab3"),
Tab(text: "Tab4"),
],
),
),
class Menu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: SafeArea(
child: Scaffold(
body: Consumer<MenuBlock>(
builder: (context, appController, child) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: true,
pinned: false,
snap: true,
forceElevated: true,
elevation: 1,
expandedHeight: 50.0,
title: Text('TITLE'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () {/* ... */},
),
],
bottom: TabBar(
tabs: [
Tab(text: "TAB1"),
Tab(text: "TAB2"),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
<Widget>[
Container(
// or SizedBox, etc.
height: 4200,
child: TabBarView(
children: [
),
),
],
),
),
],
);
}),
),
),
);
}
}