Bottom Navigation Bar Routing


Bottom Navigation Bars are widely used to handle seamless routing within a significant number of mobile apps. Luckily, AutoRoute comes with an AutoTabsScaffold widget that makes this super easy, while implementing several features including:

  • Easy navigation between routers
  • Preserved state for each router
  • Lazily loaded routers by default
  • Seamless integration with Flutter's BottomNavigationBar or your own custom NavigationBar
  • Built-in and customizable animations between routers
To begin using AutoTabsScaffold , we'll need to alter our router setup from the Nested Routes example
(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: "/",
      page: HomePage,
      children: [    
        // our BooksRouter has been moved into the children field
        AutoRoute(
          path: "books",
          name: "BooksRouter",
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: '', page: BooksPage),
            AutoRoute(path: ':bookId', page: BookDetailsPage),
            RedirectRoute(path: '*', redirectTo: ''),
          ], 
        ),
        // our AccountRouter has been moved into the children field
        AutoRoute(
          path: "account",
          name: "AccountRouter",
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: '', page: AccountPage),
            AutoRoute(path: 'details', page: AccountDetailsPage),
            RedirectRoute(path: '*', redirectTo: ''),
          ],
        ),
      ],
    ),
  ],
)
class $AppRouter {}

Now, we can use AutoTabsScaffold in our app. Check out how much boilerplate code has been eliminated!

Widget build(context) {
  return AutoTabsScaffold(
    routes: const [
      BooksRouter(),
      AccountRouter(),
    ],
    bottomNavigationBuilder: (_, tabsRouter) {
      return BottomNavigationBar(
        currentIndex: tabsRouter.activeIndex,
        onTap: tabsRouter.setActiveIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.book),
            label: 'Books',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            label: 'Account',
          ),
        ],
      );
    },
  );
}

Cross-tab Navigation


To navigate to a specific page in a different navigation tab, we can use the standard navigation methods for navigating between different routers.

For example, if we are on in the BooksPage and we want to navigate to AccountDetailsPage we can do:
context.navigateTo(AccountRouter(children: AccountDetailsRoute()))