seel-channel/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
https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/BottomPosition.gif	https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/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://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/LeftPosition.gif	https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/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);

---

Identifier Details

physics = true	physics = False
https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/scrollPhysicsTrue.gif	https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/scrollPhysicsFalse.gif

position = IdentifierPosition.topAndRight	showIdentifier = False
https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/identifierOnTop.gif	https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/assets/readme/scroll_navigation/showIdentifierFalse.gif

Code

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

---

Title Scroll Navigation Details

https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/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]),
    ],
);

---

Screen Details (Hide AppBar on scroll)

https://raw.githubusercontent.com/seel-channel/scroll_navigation/HEAD/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],
          ),
        );
      },
    ),
  );