Flutter SliverAppBar with Tabs overlays content
In case someone comes with the same problem, the way I solve this was using: https://pub.dartlang.org/packages/extended_nested_scroll_view
Example:
class _MatchFragmentState extends State<MatchFragment> with TickerProviderStateMixin {
TabController primaryTC;
@override
void initState() {
primaryTC = new TabController(length: 3, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
final double statusBarHeight = MediaQuery.of(context).padding.top;
//var tabBarHeight = primaryTabBar.preferredSize.height;
var pinnedHeaderHeight =
//statusBar height
statusBarHeight +
//pinned SliverAppBar height in header
kToolbarHeight;
return Scaffold(
body: NestedScrollViewRefreshIndicator(
onRefresh: onRefresh,
child: ExtendedNestedScrollView(
headerSliverBuilder: (c, f) {
return <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: kExpandedHeight,
title: Text('Title'),
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
))
),
)
];
},
pinnedHeaderSliverHeight: pinnedHeaderHeight,
keepOnlyOneInnerNestedScrollPositionActive: true,
body: Column(
children: <Widget>[
TabBar(
controller: primaryTC,
labelColor: Colors.black87,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(text: "Tab1"),
Tab(text: "Tab2"),
Tab(text: "Tab3"),
],
),
Expanded(
child: TabBarView(
controller: primaryTC,
children: <Widget>[
new Tab1Screen(),
new Tab2Screen(),
new Tab3Screen()
],
),
)
],
)
),
)
);
}
}
Future<Null> onRefresh() {
final Completer<Null> completer = new Completer<Null>();
new Timer(const Duration(seconds: 1), () {
completer.complete(null);
});
return completer.future.then((_) {});
}