Skip to content

Instantly share code, notes, and snippets.

@X-Wei
Created July 29, 2018 11:36
Show Gist options
  • Save X-Wei/ed1ce793482789c8e9632592b79458f7 to your computer and use it in GitHub Desktop.
Save X-Wei/ed1ce793482789c8e9632592b79458f7 to your computer and use it in GitHub Desktop.
Demo of using SliverAppbar with tabs.
// Sliver appbar with tabs.
// Adapted from: https://stackoverflow.com/a/50858058
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: SilverAppBarWithTabBarScreen(),
));
class SilverAppBarWithTabBarScreen extends StatefulWidget {
@override
_SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
}
class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
with SingleTickerProviderStateMixin {
TabController controller;
@override
void initState() {
super.initState();
controller = TabController(
length: 3,
vsync: this,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text("SilverAppBar title"),
// pinned: true,
snap: true,
floating: true,
expandedHeight: 160.0,
// **Is it intended ?** flexibleSpace.title overlaps with tabs title.
flexibleSpace: FlexibleSpaceBar(
title: Text("FlexibleSpace title"),
),
bottom: TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
controller: controller,
),
),
// SliverList(
SliverFillRemaining(
child: TabBarView(
controller: controller,
children: <Widget>[
Center(child: Text("Tab one")),
Center(child: Text("Tab two")),
Center(child: Text("Tab three")),
],
),
),
],
),
);
}
}
@X-Wei
Copy link
Author

X-Wei commented Jul 29, 2018

preview:

screenshot_1532864246

@X-Wei
Copy link
Author

X-Wei commented Oct 21, 2018

The FlexibleSpaceBar will stack on the TabBar. Note this is intended behavior, according to the doc:

"If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget."

There's an issue opened on how to do this correctly.

@moho12n
Copy link

moho12n commented Jun 30, 2020

thank you dude this was really helpful

@sanjeetchand
Copy link

This is interesting, however, what would happen if there is a ListView.builder inside the TabBarView. How will the scroll event be handled?

What I am basically after is this scrolling behaviour.

When the app screen loads, all scrolling events to be handled by the CustomScrollView up until the ListView comes into view in the TabBarView.

Once the list view is on screen, let it handle all downward scroll. When the user starts to scroll to the top then scroll up till the first item of the list view and then propagate this scroll event to the CustomScrollView.

I tried looking at the ScrollPhysics attribute of the ListView but could not make sense of it.

@sanjeetchand
Copy link

ok I just stumbled upon the nested scroll view for this it does what I wanted https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html.

@yusuf-khamis
Copy link

Thanks dude, btw, just remove the flexible space completely but leave the title of the SliverAppBar, it will have whatsapp like effect, just in case someone needs that effect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment