in ,

A flutter navigation by gestures and taps


A navigation bar is a section of a graphical user interface intended to aid users in accessing information. Considered a traditional method of navigation, a navigation bar can be implemented in a number of ways, namely, horizontally or vertically, or fixed or dynamic. A navigation bar implementation is considered one of the key points of Web design and usability. Research for the functions of navigation and the combination of navigation and components will greatly assist you in web design. As an example of the collaboration of navigation and scroll here. The result I’m looking for is strong and attractive scroll navigation. 

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


The amazing combination of navigation and components bring great overall result. It’s shown in the features of scroll navigation such as:

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


return ScrollNavigation(
  pages: <Widget>[
    Screen(title: title("Camera")),
    Screen(title: title("Messages"), backgroundColor: Colors.yellow[50]),
    Screen(title: title("Favor"), body: Container(color: Colors.cyan[50])),
    Screen(title: title("Activity"), backgroundColor: Colors.yellow[50]),
    Screen(title: title("Home"))
  navItems: <ScrollNavigationItem>[
    ScrollNavigationItem(icon: Icon(,
    ScrollNavigationItem(icon: Icon(,
    ScrollNavigationItem(icon: Icon(Icons.favorite)),
    ScrollNavigationItem(icon: Icon(Icons.notifications)),
      icon: Icon(Icons.home),
      activeIcon: Icon(Icon: verified_user),
  pagesActionButtons: <Widget>[
    FloatingActionButton( //PAGE 1
      child: Icon(Icons.receipt),onPressed: () => null
    FloatingActionButton( //PAGE 3
      child: Icon(Icons.sync), onPressed: () => null,
    FloatingActionButton( //PAGE 5
      child: Icon(Icons.add), onPressed: () => print("Cool :)"),

Scroll Navigation Details

(It’s recommended to set showAppBar = false on the Screen Widget)

navigationOnTop = TruenavigationOnTop = False

Go to a Page Code

final navigationKey = GlobalKey<ScrollNavigationState>();

Widget build(BuildContext context) {
  return ScrollNavigation(
    key: navigationKey,
    navigationOnTop = true, //Default is false
    pages: <Widget>[],
    navItems: <ScrollNavigationItem>[],

void goToPage(int index) {

Identifier Details

identifierPhysics = TrueidentifierPhysics = False
identifierOnBottom = FalseshowIdentifier = False


return ScrollNavigation(
    showIdentifier = true,
    identifierPhysics = true,
    identifierOnBottom = true,
    pages: <Widget>[],
    navItems: <ScrollNavigationItem>[],

Screen Details

Screen fixes some problems the Scaffold has with the ScrollNavigation.

Without WidgetsWith Widgets

Without Widgets Code

return Screen();

With Widgets Code

return Screen(
    title: title("Home"), //Function in the Example
    leftWidget: Icon(, color: Colors.grey),
    rightWidget: Icon(Icons.favorite, color: Colors.grey),

Hide AppBar on scroll.

flutter navigation


ScrollController controller = ScrollController();

return Screen(
    height: 56.0,
    elevation: 0.0,
    centerTitle: false,
    title: title("Title Scroll"),
    leftWidget: ScreenReturnButton(), //IMPORTANT TO RETURN!
    controllerToHideAppBar: controller,
    body: ListView.builder(
      itemCount: 15,
      controller: controller,
      itemBuilder: (context, key) {
        return Padding(
          padding: EdgeInsets.symmetric(vertical: 5),
          child: Container(
            height: 50,

Title Scroll Navigation Details



return TitleScrollNavigation(
    padding: TitleScrollPadding.symmetric(horizontal: 40.0, betweenTitles: 40),
    titleStyle: TextStyle(fontWeight: FontWeight.bold),
    titles: [
      "Main Page",
      "Personal Information",
      "Payment Methods",
    pages: [
      Container(color: Colors.purple[50]),
      Container(color: Colors.yellow[50]),


Written by James

A Flutter Widget for an AppBar that is initially flush with elevated when scrolled

A Flutter widget for Scrollview, pop when overscroll like Instagram