scroll_bottom_navigation_bar 4.0.0

This package allow hide or show bottom navigation bar while scrolling

ScrollBottomNavigationBar

Hide or show bottom navigation bar while scrolling.

Simple scroll	Snap behavior

Roadmap

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

Feature	Progress
Simple scroll	✅
Snap behavior	✅
Pin/unpin	✅
FAB supported	✅
Snackbar supported	✅
Gradient background	✅

NOTE: Try use this package with scroll_app_bar package to a better user experience. See an example.

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 ScrollController instance.

final controller = ScrollController(); 

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

NOTE: Showing only essencial code. See example section to a complete implementation.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ValueListenableBuilder<int>(
      valueListenable: controller.bottomNavigationBar.tabNotifier,
      builder: (context, tabIndex, child) => ListView.builder(
        controller: controller,
        itemBuilder: ...,
      ),
    ),
    bottomNavigationBar: ScrollBottomNavigationBar(
      controller: controller,
      items: ...,
    ),
  );
}

Snap behavior

To enable the snap behavior, you need just wrap the main scrollable widget with a Snap widget and attach controller.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ValueListenableBuilder<int>(
      valueListenable: controller.bottomNavigationBar.tabNotifier,
      builder: (context, tabIndex, child) => Snap(
        controller: controller.bottomNavigationBar,
        child: ListView.builder(
          controller: controller,
          itemBuilder: ...,
        ),
      ),
    ),
    bottomNavigationBar: ScrollBottomNavigationBar(
      controller: controller,
      items: ...,
    ),
  );
}

Example

See a complete example.

API Reference

// Returns the total height of the bar
controller.bottomNavigationBar.height;

// Notifier of the visible height factor of bar
controller.bottomNavigationBar.heightNotifier;

// Notifier of the pin state changes
controller.bottomNavigationBar.isPinned;

// Returns [true] if the bar is pinned or [false] if the bar is not pinned
controller.bottomNavigationBar.pinNotifier;

// Set a new pin state
controller.bottomNavigationBar.setPinState(state);

// Toogle the pin state
controller.bottomNavigationBar.tooglePinState();

// Notifier of the active page index
controller.bottomNavigationBar.tabNotifier;

// Register a closure to be called when the tab changes
controller.bottomNavigationBar.tabListener(listener);

// Set a new tab
controller.bottomNavigationBar.setTab(tabIndex);

// Discards resource
controller.bottomNavigationBar.dispose();

Change log

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please send feature requests and bugs at the issue tracker.

Credits

• Edson Onildo
• All Contributors

License

BSD 3-Clause License. Please see License File for more information.