Routes and navigation

Global navigation is using the GoRouter package.
It's a simple and powerful router that allows you to define routes and navigate between them but also handling deep links.

In this app structure we have two layers of navigation.

• top navigation
• bottom navigation (used by the bottom navigation bar)

Top navigation

The top navigation is defined in the lib/router.dart file.

You can push a route using the context.push('my_route') method.
👉 The route must be defined in the lib/router.dart file like this

GoRoute(
    name: 'home',
    path: '/',
    builder: (context, state) => BottomMenu(),
),

Note: if a bottom navigation is visible please check the bottom navigation section below.

Bottom navigation

The bottom navigation is defined in the lib/core/bottom_menu/bottom_router.dart file.
This use the package Bart that we made to handle bottom navigation according to Apple and Google recommandations.

When you are in a page that is part of the bottom navigation. You can push a route withing the same tab using regular Navigator.pushNamed('my_route') method.
👉 The route must be defined in the lib/core/bottom_menu/bottom_router.dart file like this

BartMenuRoute.innerRoute(
    path: 'my_route',
    pageBuilder: (_, __, ___) => const MyPage(),
),

If you want to push a page above the navigation bar (like a modal) you can use

Navigator.of(context, rootNavigator: true).pushNamed('my_route');

👉 The route must be defined in the lib/router.dart file like this

You can also

• animate the bottom navigation bar
• animate hide and show a top bar

For more info about Bart please refer to the documentation.

Page transitions

The page transition has been set to native recommandations.
You can change it in the lib/theme.dart file for each OS.

pageTransitionsTheme: const PageTransitionsTheme(
    builders: {
      TargetPlatform.android: ZoomPageTransitionsBuilder(),
      TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    },
  ),

Protecting a route

You can protect a route using a guard.
It means that if a condition is not met we will redirect our user to another route.
This is useful for example to redirect a user to the login page if he is not authenticated.
By default we always go to the home page in our app. It only redirect the user to the authentication flow if he is not authenticated.

A guard is a class that use the Guard widget interface.

For example you can use the AuthenticatedGuard to protect a route.
in `lib/router.dart``

GoRoute(
    name: 'home',
    path: '/',
    builder: (context, state) => const AuthenticatedGuard(
        fallbackRoute: '/signup',
        child: BottomMenu(),
    ),
),

Creating a guard

You can use the lib/core/guards/authenticated_guard.dart file as an example to create a new guard.