Posted in Dart Flutter

Flutter – How to hide App Bar on Scroll and fixed Tab Bar at bottom

Flutter – How to hide App Bar on Scroll and fixed Tab Bar at bottom Posted on May 17, 20202 Comments
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Do you want to hide your App bar on a scroll which has Tabs at the bottom? See the example below to achieve such features in your app. In the example, the SliverAppBar() widget is used, and the output is as sown below.

hide appbar on scroll

See the example below and learn how to hide App Bar on scroll along with fixed Tab bar.

import 'package:flutter/material.dart';

class HideAppBarScroll extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
     return _HideAppBarScrollState();
  }
}

class _HideAppBarScrollState extends State<HideAppBarScroll> with TickerProviderStateMixin {
  //add with TickerProviderStateMixin at the end of  state declaration
  TabController tabController; //controller for tab

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 2, vsync:this);
    //set tabcontroller with lengther
    //vsync:this will show error if you do not add with TickerProviderStateMixin above

    tabController.addListener((){
        //listiner for tab events
        if(tabController.indexIsChanging) { //if tab is changed
              int tabindex = tabController.index;
              print("Current Tab is $tabindex");
              //or you can use driectrly
              //print("Current Tab is ${tabController.index}");
       }
    });
  }

  @override
  void dispose() {
    tabController.dispose(); //destroy tabcontroller to release memory
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold( 
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool isscrolled){
             return <Widget>[
                SliverAppBar(
                      title: new Text("Appbar Title with Tabs"),
                      backgroundColor: Colors.deepOrangeAccent,
                      pinned:true, 
                      floating: true,
                      forceElevated: isscrolled,
                      leading: Icon(Icons.menu),
                      actions: <Widget>[
                        //button list at right side of appbar
                          IconButton(
                            icon: Icon(Icons.shopping_cart), 
                            onPressed: (){
                                //action for this button
                            }
                          ),

                          IconButton(
                            icon: Icon(Icons.person), 
                            onPressed: (){
                                //action for this button
                            }
                          )
                      ],

                      //set bottom if you want to add tabbar
                      bottom: new TabBar(
                          tabs: <Tab>[
                            new Tab(text: "PLACES TO VISIT"),
                            new Tab(text: "NAMES oF GUIDE"),
                          ],
                          controller: tabController,
                      ),
                ),
            ];
          },
          body: TabBarView( //set TabBarView  if you have added Tabbar at bottom of Appbar
                controller: tabController,
                children:<Widget>[ //place widget aranged like tab in tabbar

                  SingleChildScrollView( 
                  //list of palces to visit
                          child:Column(children: <Widget>[
                                democard("Kathamndu, Nepal"),
                                democard("Pokhara, Nepal"),
                                democard("Dhangadhi, Nepal"),
                                democard("Lumbini, Nepal"),
                                democard("Janakpur, Nepal"),
                        ],)
                  ),

                  SingleChildScrollView( 
                  //list of names of guides
                          child:Column(children: <Widget>[
                                democard("Anil Chaudhary"),
                                democard("Krishna Chaudhary"),
                                democard("Gangaram Dhungana"),
                                democard("Digvijay Chaudhary"),
                                democard("Arjun Karki"),
                        ],)
                  ),

                ]
          )
        )
     );
  }

  //widget to show name in card
  Widget democard(title){
     return Card( 
       child:Container( 
         width: double.infinity,
         padding: EdgeInsets.all(20),
         child: Text(title, style: TextStyle(fontSize: 20),),
       )
     );
  }
}

In this way, you can achieve App Bar in your app which get hided on scroll.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *