Flutter – Hidden Bottom AppBar
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, ), ), ), ); } } |
Contact Us