how to hide bottom nav bar when user is scrolling

Question

I am using persistent_bottom_nav_bar: ^5.0.2 and how do i hide the bottom nav bar when is scrolling down a list view of chats and when the user scrolls up, it will come back up.

Answer 1

Here is the example to hide FAB on scroll down, the same way you can hide your navigation bar

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ScrollController _scrollController =
      new ScrollController(); 
  bool _show = true;
  List<String> items = [];

  @override
  void initState() {
    super.initState();
    addItemsToTheList();
    handleScroll();
  }

  @override
  void dispose() {
    _scrollController.removeListener(() {});
    super.dispose();
  }

  void showFloationButton() {
    setState(() {
      _show = true;
    });
  }

  void hideFloationButton() {
    setState(() {
      _show = false;
    });
  }

  void addItemsToTheList() {
    for (int count = 1; count <= 100; count++) {
      items.add("Test Item " + count.toString());
    }
  }

  void handleScroll() async {
    _scrollController.addListener(() {
      if (_scrollController.position.userScrollDirection ==
          ScrollDirection.reverse) {
          hideFloationButton();
      }
      if (_scrollController.position.userScrollDirection ==
          ScrollDirection.forward) {
          showFloationButton();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Hide FAB"),
        ),
        body: Container(
          child: new ListView.builder(
              controller: _scrollController,
              itemCount: items.length,
              itemBuilder: (BuildContext ctxt, int index) {
                return new Card(
                    child: ListTile(
                  title: Text(items[index]),
                ));
              }),
        ),
        floatingActionButton: Visibility(
          visible: _show,
            child: FloatingActionButton(
                child: Icon(Icons.add), onPressed: () {})));
  }
}