FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

Overview

scroll_navigation

My other APIs

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

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

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

position = IdentifierPosition.topAndRight	showIdentifier = False

Code

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

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

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

A widget that shows an image which can be scaled and dragged using gestures.

[DISCONTINUED] - 24.05.2021 While this widget was useful in the early days of Flutter, the Flutter team introduced an own way to zoom and pan, see Int

May 3, 2022

Easy to use, reliable and lightweight gesture detector for Flutter apps, exposing simple API for basic gestures

Simple Gesture Detector Easy to use, reliable and lightweight gesture detector for Flutter apps. Exposes simple API to react to basic gestures. Featur

Nov 4, 2022

A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Jun 18, 2020

Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page 🔥 🚀 Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Dec 22, 2022

Flutter app to browse Reddit with swiping gestures

Diaporama (for Reddit) A pretty simple Flutter app to browse Reddit with swiping gestures You select your content source (list of subreddits) and you

Nov 23, 2021

Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView ListView with items that can be scrolled and lazy loaded in up and down direction with a fixed item count and scroll bo

May 30, 2022

Comments

BottomNavigationBarItem title not visible

Hello,

thank you for creating this nice package. It's working fine so far and it saves me lot of boilerplate.

However I'm wondering why the titles of the bottomNavigationBarItems are not visible. Please consider to implement this in a future update.

Greetings syntacops

opened by syntacops 2
It doesn't change pagesActionButtons when setState

I try to change text of my button inside pagesActionButtons when setState but it doesn't.

pagesActionButtons: [ TextButton(onPressed: (){}, child: Text("hello".tr),), ],

Thank you!

opened by huonsokly 0

FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

Related tags

Overview

scroll_navigation

My other APIs

Features

Scroll Navigation Details

Code

Code

Go to a Page Code

Identifier Details

Code

Title Scroll Navigation Details

Code

Screen Details (Hide AppBar on scroll)

Code

You might also like...

Comments

Owner

Luis Felipe Murguia Ramos

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.

Google one tap sign in - Flutter Google One Tap Sign In (Android)

A simple widget for having UI elements that respond to taps with a spring animation.

This is a mason brick you can use to generate code that get's you started right up with a flutter project

Sort it - Nothing is waste, but it becomes one when it is in the wrong place ,but who has the time to sort it and put it at its right place?

Its a food delivery application that user can buy food , using this application user can see the restaurants near to there location and far from them also. And this application provides easy interface that user can easily use this application for purchases.

Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

The Material Design Icons Icon pack available as set of Flutter Icons.