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")),
],
),
),
],
),
);
}
}
@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