Hide Appbar on Scroll Flutter?

Question

Consider this image. As you can see it has an appbar and the appbar has Tabbed buttons. Am trying to animate the appbar so that it hides on scrollup and leaves only the Tab Buttons showing and on scrollup the appbar apears. Please help me out. Sorry for bad english and not American neither am I English

Answer 1

If I understood you correctly, following code should make the app bar hide on scroll while TabBar remains visible:

Null safe code:

class _SomePageState extends State<SomePage> with SingleTickerProviderStateMixin {   late final TabController _tabController;    @override   void initState() {     super.initState();     _tabController = TabController(length: 2, vsync: this);   }    @override   Widget build(BuildContext context) {     return Scaffold(       body: NestedScrollView(         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {           return <Widget>[             SliverAppBar(               title: Text('Weight Tracker'),               pinned: true,               floating: true,               forceElevated: innerBoxIsScrolled,               bottom: TabBar(                 tabs: <Tab>[                   Tab(text: 'STATISTICS'),                   Tab(text: 'HISTORY'),                 ],                 controller: _tabController,               ),             ),           ];         },         body: TabBarView(           controller: _tabController,           children: <Widget>[             StatisticsPage(),             HistoryPage(),           ],         ),       ),     );   } } 

Example coming from this post.

Answer 2

Using DefaultTabController

DefaultTabController(       length: 2,       child: new Scaffold(         body: new NestedScrollView(           headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {             return <Widget>[               new SliverAppBar(                 title: Text("Application"),                 floating: true,                 pinned: true,                 snap: true,                 bottom: new TabBar(                   tabs: <Tab>[                     new Tab(text: "T"),                     new Tab(text: "B"),                   ], // <-- total of 2 tabs                 ),               ),             ];           },           body: new TabBarView(             children: <Widget>[               Center(                   child: Text(                 'T Tab',                 style: TextStyle(fontSize: 30),               )),               Center(                   child: Text(                 'B Tab',                 style: TextStyle(fontSize: 30),               )),             ],           ),         ),       ),     ); 

Output: