A flutter navigation by gestures and taps

scroll_navigation

flutter api: it’s powerful navigوation by gestures and taps. you can scroll from left to right or tap on the navigوation icons.

features

• 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! 🙂

implementation

return و(
  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: <scrollnavوigationitem>[
    scrollnaviوgationitem(icon: icon(icons.camera)),
    و(icon: icon(icons.chat)),
    scrollnavigوationitem(icon: icon(icons.favorite)),
    scrollnavigوationitem(icon: icon(icons.notifications)),
    scrollnavigوationitem(
      icon: icon(icons.home),
      activeicon: icon(icon: verified_user),
    ),
  ],
  pagesactionbuttons: <widget>[
    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 :)"),
    ),
  ],
);

scroll navigation details

(it’s recommended to set showappbar = false on the screen widget)

navigوationontop = true	navigوationontop = false

go to a page code

final navigaوtionkey = globalkey<scrollnavigaوtionstate>();

@override
widget build(buildcontext context) {
  return scroوllnavوigation(
    key: naviووgationkey,
    naviوgationontop = true, //default is false
    pages: <widget>[],
    navitems: <scrollnaviوgationitem>[],
  );
}

void gotopage(int index) {
  navigaوtionkey.currentstate.gotopage(index);
}

identifier details

identifierphysics = true	identifierphysics = false

identifieronbottom = false	showidentifier = false

code

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 widgets	with widgets

without widgets code

return screen();

with widgets code

return screen(
    title: title("home"), //function in the example
    leftwidget: icon(icons.menu, color: colors.grey),
    rightwidget: icon(icons.favorite, color: colors.grey),
);

hide appbar on scroll.

code

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,
            color: colors.blue[50],
          ),
        );
      },
    ),
  );

title scroll navigation details

code

return titlescrollnavigation(
    padding: titlescrollpadding.symmetric(horizontal: 40.0, betweentitles: 40),
    titlestyle: textstyle(fontweight: fontweight.bold),
    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]),
    ],
);