scroll_bottom_navigation_bar 4.0.0 copy "scroll_bottom_navigation_bar: ^4.0.0" to clipboard
scroll_bottom_navigation_bar: ^4.0.0 copied to clipboard

This package allow hide or show bottom navigation bar while scrolling

ScrollBottomNavigationBar #

Hide or show bottom navigation bar while scrolling.

Simple scroll Snap behavior
n1 n2

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 #

License #

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

174
likes
130
pub points
85%
popularity

Publisher

unverified uploader

This package allow hide or show bottom navigation bar while scrolling

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, scroll_bars_common

More

Packages that depend on scroll_bottom_navigation_bar