Open In App

Flutter – Hidden Bottom AppBar

Improve
Improve
Like Article
Like
Save
Share
Report

Bottom AppBar or Bottom Navigation Bar is mostly used in every Android IOS Application, Bottom Navigation Bar is an AppBar containing Tabs which is used to show more pages on a single screen. We are going to Hide the bottom App Bar on scroll down and show it in scroll up.  

What will we do?

We will show the bottom bar container with some height if we scroll up that means the bottom bar is showing, or we will make height 0 if we scroll down, Which means the bottom bar is hidden, this will going to be a simple approach.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

There is no need of package

Step 2: Create a Class HiddenBottomAppBar and Return the MaterialApp.

Dart




import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
 
void main() => runApp(MaterialApp(
      home: HiddenBottomAppBar(),
    ));
//class hiddenBottomAppBar
class HiddenBottomAppBar extends StatefulWidget {
  const HiddenBottomAppBar({Key? key}) : super(key: key);
 
  @override
  HiddenBottomAppBarState createState() => new HiddenBottomAppBarState();
}
 
class HiddenBottomAppBarState extends State<HiddenBottomAppBar> {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(    //MaterialApp
      
    );
  }
}


Step 3: Working with MaterialApp

We are going to use the list of images for scrolling, When we scroll up the Images the bottom bar is hidden, and scroll up the bottom is shown.

 A scroll controller is created in the init method If the scroll direction is reverse, the invisible variable becomes false and the bottom is shown. when the scroll direction is forward, the invisible variable becomes true and the bottom bar is hidden.

Note – Include the images in the pubspec.yaml File, otherwise it will show an error.

Dart




_isVisible = true//isvisible variable is used like flag
   _HideBottomAppBarController = new ScrollController(); // create a ScrollController
   _HideBottomAppBarController.addListener(() {
     if (_HideBottomAppBarController.position.userScrollDirection ==
         ScrollDirection.reverse) {
       setState(() {   //if scrollcontroller value is reverse make the isvisible to false,
         _isVisible = false;
       });
     }
     if (_HideBottomAppBarController.position.userScrollDirection ==
         ScrollDirection.forward) {
       setState(() {//if scrollcontroller value is forward make the isvisible to true,
         _isVisible = true;
       });
     }
   });


Code Example

Dart




import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
 
void main() => runApp(MaterialApp(
      home: HiddenBottomAppBar(),
    ));
 
class HiddenBottomAppBar extends StatefulWidget {
  const HiddenBottomAppBar({Key? key}) : super(key: key);
 
  @override
  HiddenBottomAppBarState createState() => new HiddenBottomAppBarState();
}
 
class HiddenBottomAppBarState extends State<HiddenBottomAppBar> {
  late ScrollController _HideBottomAppBarController;
  var _isVisible;
 
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _HideBottomAppBarController = new ScrollController();
    _HideBottomAppBarController.addListener(() {
      if (_HideBottomAppBarController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
        });
      }
      if (_HideBottomAppBarController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
        });
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          controller: _HideBottomAppBarController,
          children: [
            Text("Scroll Down Will Hide The BottomAppBar!"),
            Text("Scroll Up   Will Show The BottomAppBar!"),
            Divider(),
            Image.asset("assets/s1.png"),
            Divider(),
            Image.asset("assets/s2.png"),
            Divider(),
            Image.asset("assets/S4.png"),
          ],
        ),
        bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 50),
          height: _isVisible ? 60.0 : 0.0,
          child: _isVisible
              ? AnimatedContainer(
                  duration: Duration(milliseconds: 50),
                  height: _isVisible ? 60.0 : 0.0,
                  child: _isVisible
                      ? Container(
                          width: MediaQuery.of(context).size.width,
                          color: Colors.blue,
                          child: Center(
                            child: Text("Bottom AppBar"),
                          ),
                        )
                      : Container(
                          color: Colors.white,
                          width: MediaQuery.of(context).size.width,
                        ),
                )
              : Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                ),
        ),
      ),
    );
  }
}


Output 



Last Updated : 14 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads