Skip to content

Instantly share code, notes, and snippets.

@X-Wei
Created July 29, 2018 11:36
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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")),
],
),
),
],
),
);
}
}
@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