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
@MaterialAutoRouter(
  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!
@override
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()))