Skip to content

Instantly share code, notes, and snippets.

@NeatSnippets
Created August 30, 2020 06:52
Show Gist options
  • Save NeatSnippets/921b8a758fe5a3fd4b0ab9021ac90c2b to your computer and use it in GitHub Desktop.
Save NeatSnippets/921b8a758fe5a3fd4b0ab9021ac90c2b to your computer and use it in GitHub Desktop.
How to hide bottom navigation bar when scrolling in Flutter
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hide Bottom Navigation Bar'),
),
body: Container(
width: double.infinity,
child: ListView.builder(
controller: _scrollController,
itemBuilder: (context, index) {
return ListTile(
title: Text('Google $index'),
onTap: () {},
);
},
),
),
bottomNavigationBar: AnimatedBuilder(
animation: _scrollController,
builder: (context, child) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: _scrollController.position.userScrollDirection == ScrollDirection.reverse ? 0: 100,
child: child,
);
},
child: BottomNavigationBar(
backgroundColor: Colors.amber[200],
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.child_friendly),
title: Text('Child'),
),
],
),
),
);
}
}
//When you run the app in release mode, you will get a better performance.
@NeatSnippets
Copy link
Author

NeatSnippets commented Aug 30, 2020

The result:

output

@markosole
Copy link

This is great and I love it. Easiest solution without any extra plugin.
I've improved it slightly by adding sensitivity factor, which gives you extra 20-30 pixels to scroll up or down until menu is activated.
Here is how I've accomplished it:

Define this vars:

   // Scroll controller for menu
  late ScrollController _showResponseModal;
  double position = 0.0;
  double sensitivityFactor = 20.0;
  String scrollDirection = "";

  // Init state
  @override
  void initState() {
    _showResponseModal = ScrollController();
  }

  // dispose it as well
  @override
  void dispose() {
    _showResponseModal.dispose();
    super.dispose();
  }

Change your builder to:

  animation: _showResponseModal,
  builder: (context, child) {
    if (_showResponseModal.position.pixels - position >=
        sensitivityFactor) {
      scrollDirection = "down";
      position = _showResponseModal.position.pixels;
    }
    if (position - _showResponseModal.position.pixels >=
        sensitivityFactor) {
      scrollDirection = "up";
      position = _showResponseModal.position.pixels;
    }

    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      height: scrollDirection == "down" ? 0 : 100,
      child: child,
    );
  }

I hope someone will find this useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment