Hide or show bottom navigation bar while scrolling with flutter

ScrollBottomNavigationBar

With the development of social media, scrolling has become a must-have feature for any interface for users. It has many advantages, such as when the user searches for something particular and special for them, they are able to browse through a large number of items to find the one thing they like. The best part is that scrolling helps people access the content they need. But when using scrolling, the bottom navigation bar displays for users. So, how to hide or show the bottom navigation bar? Don’t worry about it.

With Flutter, you can hide or show the bottom navigation bar while scrolling. 

Roadmap

This is currently our roadmap, please feel free to request additions/changes.

Usage

Getting started

Add scroll_bottom_navigation_bar package to your project. You can do this following this steps.

Basic implementation

First, you need a ScrollBottomNavigationBarController instance. If you need a custom ScrollController, you can pass the instance on constructor.

final controller = ScrollBottomNavigationBarController(); 

Now, you can use the ScrollBottomNavigationBar widget in a Scaffold widget, and attach ScrollController instance in your scrollable widget on the body.

To simplify your code, you can use the ScrollBody widget as your scrollable widget. This widget takes care of exchanging items from the bottom bar.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ScrollBody(
      scrollBottomNavigationBarController: controller,
      builder: (context, index) => container(index),
    ),
    bottomNavigationBar: ScrollBottomNavigationBar(
      scrollBottomNavigationBarController: controller,
      items: items,
    ),
  );
}

ScrollBottomNavigationBarController

You can use the ScrollBottomNavigationBarController instance to manage the behavior of the bottom navigation bar.

// Custom scroll controller
final scrollController = ScrollController();

final controller = ScrollBottomNavigationBarController(
  scrollController: scrollController,
  snap: true, // snap effect
); 

Change page

controller.changePage(page);

Check pin state

controller.isPinned;

Pin

controller.setPinState(true);

Unpin

controller.setPinState(false);

Toogle pin state

controller.tooglePin();

Check snap state

controller.snap;

Snap

controller.setSnapState(true);

Unsnap

controller.setSnapState(false);

Toogle snap state

controller.toogleSnap();

Listen page changes

controller.pageListener((index) => print(index));

Dispose

controller.dispose();

Example

In addition, for more informations, you can also check the example.

Snapshots

GitHub

https://github.com/EdsonOnildoJR/scroll_bottom_navigation_bar