scroll_navigation

Description:

scroll navigation

scroll_navigation #
My other APIs #

Video Viewer
Video Editor
Helpers


Features #

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.



Scroll Navigation Details #



NavigationPosition.bottom
NavigationPosition.top










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))
],
);
}

copied to clipboard





NavigationPosition.left
NavigationPosition.right










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))
],
);
}

copied to clipboard

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);

copied to clipboard



Identifier Details #



physics = true
physics = False













position = IdentifierPosition.topAndRight
showIdentifier = False










Code
return ScrollNavigation(
pages: [...],
items: [...],
physics: true,
showIdentifier: true,
identiferStyle: NavigationIdentiferStyle(
position: NavigationPosition.top,
),
);
copied to clipboard



Title Scroll Navigation Details #


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]),
],
);
copied to clipboard



Screen Details (Hide AppBar on scroll) #


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],
),
);
},
),
);
copied to clipboard