scroll_bottom_navigation_bar

Description:

scroll bottom navigation bar

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();
copied to clipboard
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: ...,
),
);
}
copied to clipboard
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: ...,
),
);
}
copied to clipboard
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();
copied to clipboard
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.