- Fancy animations.
- Customizable colors.
- Works with the back button.
- Scrolling pages by gestures.
- Indicator that follows the scroll.
- Easy and powerful implementation! :)
- Page movement when tapping an icon.
NavigationPosition.bottom |
NavigationPosition.top |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/BottomPosition.gif) |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/TopPosition.gif) |
Code
@override
Widget build(BuildContext context) {
return ScrollNavigation(
bodyStyle: NavigationBodyStyle(
background: Colors.white,
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
),
barStyle: NavigationBarStyle(
background: Colors.white,
elevation: 0.0,
),
pages: [
Container(color: Colors.blue[100]),
Container(color: Colors.green[100]),
Container(color: Colors.purple[100]),
Container(color: Colors.amber[100]),
Container(color: Colors.deepOrange[100])
],
items: const [
ScrollNavigationItem(icon: Icon(Icons.camera)),
ScrollNavigationItem(icon: Icon(Icons.chat)),
ScrollNavigationItem(icon: Icon(Icons.favorite)),
ScrollNavigationItem(icon: Icon(Icons.notifications)),
ScrollNavigationItem(icon: Icon(Icons.home))
],
);
}
NavigationPosition.left |
NavigationPosition.right |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/LeftPosition.gif) |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/RightPosition.gif) |
Code
@override
Widget build(BuildContext context) {
return ScrollNavigation(
bodyStyle: NavigationBodyStyle(
background: Colors.white,
borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
scrollDirection: Axis.vertical,
),
barStyle: NavigationBarStyle(
position: NavigationPosition.left,
elevation: 0.0,
background: Colors.white,
),
pages: [
Container(color: Colors.blue[100]),
Container(color: Colors.green[100]),
Container(color: Colors.purple[100]),
Container(color: Colors.amber[100]),
Container(color: Colors.deepOrange[100])
],
items: const [
ScrollNavigationItem(icon: Icon(Icons.camera)),
ScrollNavigationItem(icon: Icon(Icons.chat)),
ScrollNavigationItem(icon: Icon(Icons.favorite)),
ScrollNavigationItem(icon: Icon(Icons.notifications)),
ScrollNavigationItem(icon: Icon(Icons.home))
],
);
}
Go to a Page Code
final navigationKey = GlobalKey<ScrollNavigationState>();
@override
Widget build(BuildContext context) {
return ScrollNavigation(
key: navigationKey,
pages: [...],
items: [...],
barStyle: NavigationBarStyle(position: NavigationPosition.top),
);
}
void goToPage(int index) => navigationKey.currentState.goToPage(index);
physics = true |
physics = False |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/scrollPhysicsTrue.gif) |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/scrollPhysicsFalse.gif) |
position = IdentifierPosition.topAndRight |
showIdentifier = False |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/identifierOnTop.gif) |
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/scroll_navigation/showIdentifierFalse.gif) |
Code
return ScrollNavigation(
pages: [...],
items: [...],
physics: true,
showIdentifier: true,
identiferStyle: NavigationIdentiferStyle(
position: NavigationPosition.top,
),
);
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/title_navigation/titleScrollNavigation.gif)
Code
return TitleScrollNavigation(
barStyle: TitleNavigationBarStyle(
style: TextStyle(fontWeight: FontWeight.bold),
padding: EdgeInsets.symmetric(horizontal: 40.0),
spaceBetween: 40,
),
titles: [
"Main Page",
"Personal Information",
"Personalization",
"Security",
"Payment Methods",
],
pages: [
Container(color: Colors.blue[50]),
Container(color: Colors.red[50]),
Container(color: Colors.green[50]),
Container(color: Colors.purple[50]),
Container(color: Colors.yellow[50]),
],
);
![](https://github.com/seel-channel/scroll_navigation/raw/master/assets/readme/screen/hideAppBarOnScroll.gif)
Code
ScrollController controller = ScrollController();
return Screen(
appBar: AppBarTitle(title: "Title Scroll", showBack: true), //WIDGET IN THE EXAMPLE
controllerToHideAppBar: controller,
body: ListView.builder(
itemCount: 15,
padding: EdgeInsets.zero,
controller: controller,
itemBuilder: (_, __) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
color: Colors.blue[50],
),
);
},
),
);