scroll bottom navigation bar
hide or show bottom navigation bar while scrolling.
roadmap
this is currently our roadmap, please feel free to request additions/changes.
feature | progress |
---|---|
scrollable | ✅ |
supports fab | ✅ |
supports snackbar | ✅ |
gradient background | ✅ |
pin/unpin | ✅ |
snap/unsnap | ✅ |
auto change page | ✅ |
change page by controller | ✅ |
listen page changes | ✅ |
custom scroll controller | ✅ |
auto attach scroll controller | ✅ |
animated transitions | �� |
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 body.
for simplify your code, you can use the scrollbody
widget as your scrollable widget. this widget takes care of exchanging items from the bottom bar.
note: showing only essencial code. see example section to a complete implementation.
@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
you can also check the example for additional information.
snapshots
Comments are closed.