How to Hide Bottom Navigation Bar When Scrolling in Flutter

The bottom navigation bar is critical in many mobile apps, it's like the backbone of the whole program. But sometimes you do need to hide it temporarily so that you can get advantage of its space. And the question is can we do such a thing in Flutter. The answer is yes, and that's what I'm gonna teach you today, so keep reading.

The Best Scenario to Hide the Bottom Navigation Bar Is

Let's say you have a vertical scrolling list of items, and when the user scrolls down the list, you want the BottomNavigationBar to get hidden. This's the ideal scenario for you to hide it.

ScrollController & AnimatedBuilder Are the Key

How the BottomNavigationBar gonna know when the user is scrolling down the list, the answer is by the ScrollController and AnimatedBuilder, they're like the proxy between the list and the bar, look at the following demonstrative pic:

So let's define our controller in the State object, also initializes and dispose of it.

ScrollController _scrollController;

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController();
  }


  @override
  void dispose() {
    _scrollController.dispose();

    super.dispose();
  }

After that I'm gonna create the ListView and the BottomNavigationBar in the build() method.

@override
  Widget build(BuildContext context) {
    ...
      body: ListView.builder(
        controller: _scrollController,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Google $index'),
            onTap: () {},
          );
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.amber[200],
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.child_friendly),
            title: Text('Child'),
          ),
        ],
      ),
    );
  }

If you look carefully at the previous code snippet, you will notice that I've given the ScrollController object to the ListView.

The last thing we are gonna do is add the ability to hide the BottomNavigationBar by wrapping it inside an AnimatedBuilder, and do some configurations.

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'),
            ),
          ],
        ),
      ),

What I've done in the previous snippet is:

• Giving the ScrollController to the AnimatedBuilder.
• Using AnimatedContainer instead of Container in the builder method, so that the hiding process will be animated.
• Setting the duration of the AnimatedContainer.
• Determining the scroll direction of the list, so that we can hide the bottom bar by setting its height to 0.

And that's set, I hope you like it and gonna use it in your future Flutter apps.

The Full Code

  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'),
            ),
          ],
        ),
      ),
    );
  }