How to hide bottom navigation bar when scrolling in Flutter

home.dart

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.

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.