scroll_navigation 1.0.2 copy "scroll_navigation: ^1.0.2" to clipboard
scroll_navigation: ^1.0.2 copied to clipboard

outdated

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

scroll_navigation #

DEMO #




Features #

  • Scrolling pages by gestures.
  • Page movement when tapping an icon.
  • Indicator that follows the scroll.
  • Works with the back button.
  • Fancy animations on Floating Buttons.
  • Customizable colors.
  • Easy and powerful implementation! :)


Implementation #

return ScrollNavigation(
  //DEFAULT VALUES
  //initialPage = 0,
  //showIdentifier = true,
  //showNavItemsTitle = false,
  //identifierPhysics = true,
  //identifierOnBottom = true,
  //activeColor = Colors.blue,
  //desactiveColor = Colors.grey,
  //backgroundColorNav = Colors.white,
  //backgroundColorBody = Colors.grey[100],
  pages: <Widget>[
    Screen(title: title("Camera")),
    Screen(title: title("Messages"), backgroundColor: Colors.red[50]),
    Container(color: Colors.cyan[50]),
    Screen(title: title("Activity"), backgroundColor: Colors.yellow[50]),
    Screen(title: title("Home")),
  ],
  navItems: <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.camera), title: Text(""));
    BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text(""));
    BottomNavigationBarItem(icon: Icon(Icons.favorite), title: Text(""));
    BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text(""));
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text(""));
  ],
  pagesActionButtons: [
    FloatingActionButton( //PAGE 1
      child: Icon(Icons.receipt),onPressed: () => null
    ),
    null,
    FloatingActionButton( //PAGE 3
      child: Icon(Icons.sync), onPressed: () => null,
    ),
    null,
    FloatingActionButton( //PAGE 5
      child: Icon(Icons.add), onPressed: () => print("Cool :)"),
    ),
  ],
);






Identifier Details #

identifierPhysics = True identifierPhysics = False

Code

return ScrollNavigation(
    identifierPhysics = false, //Default is true
    pages: <Widget>[],
    navItems: <BottomNavigationBarItem>[],
);



showIdentifier = False

Code

return ScrollNavigation(
    showIdentifier = false, //Default is true
    pages: <Widget>[],
    navItems: <BottomNavigationBarItem>[],
);






Screen Details #

Screen fixes some problems the Scaffold has with the ScrollNavigation.

Without Widgets With Widgets

Without Widgets Code

return ScrollNavigation(
    pages: <Widget>[
      Screen(), // <--
    ],
    navItems: <BottomNavigationBarItem>[],
);

Without Code

return ScrollNavigation(
    pages: <Widget>[
      Screen(
        title: title("Home"), //Function in the Example
        leftWidget: Icon(Icons.menu, color: Colors.grey),
        rightWidget: Icon(Icons.favorite, color: Colors.grey),
      )
    ],
    navItems: <BottomNavigationBarItem>[],
);
119
likes
0
pub points
83%
popularity

Publisher

verified publisherfelipemurguia.com

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

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on scroll_navigation