How to make a persistent bottom navigation bar visible across the app flutter with autoroute ? (flutter)

See more:

Dart

Flutter

Hi all,

Can someone please tell me how to make my bottom navigation bar persistent in my app with auto_route ? I tried to find something in the official documentation, but unfortunately nothing.

Thank you in advance for any help!

Here is my AppRouter code:

@MaterialAutoRouter(replaceInRouteName: 'Page|Screen,Route', routes: <AutoRoute>[
  AutoRoute<String>(path: '/', page: HomePage, guards: [
    AuthGuard
  ], children: [
    AutoRoute(path: '', page: ItemListPage, name: 'ItemListRoute', initial: true),
    AutoRoute(
      path: 'messages',
      page: ListOfConversationsScreen,
      name: 'ConversationsRoute',
    ),
    AutoRoute(
      path: 'settings',
      page: SettingsScreen,
      name: 'SettingsRoute',
    ),
    AutoRoute(
      maintainState: false,
      path: 'selectNgo',
      page: NgoSelectorScreen,
    ),
    AutoRoute(
      path: 'ourPartners',
      page: PartnersScreen,
      name: 'OurPartnersRoute',
    ),
  ]),
  AutoRoute(path: '/login', page: LoginScreen),
  AutoRoute(
    path: '/donate/:itemId/:conversationId',
    page: DonateScreen,
    name: 'DonateRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/donationSuccessful/:itemId/:conversationId',
    page: DonationSuccessfulScreen,
    name: 'DonationSuccessfulRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/messages/:conversation_id',
    page: ConversationScreen,
    name: 'MessagesRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/item/:itemId',
    page: ItemDetailsScreen,
    name: 'ItemDetailsRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/edit/:itemId',
    page: EditListingScreen,
    name: 'EditItemRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/profile',
    page: ProfileScreen,
    name: 'ProfileRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/private_profile',
    page: PrivateProfileScreen,
    name: 'PrivateProfileRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/tos',
    page: TosScreen,
    name: 'TosRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/dataProtection',
    page: DataProtectionScreen,
    name: 'DataProtectionRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/writeMessage',
    page: WriteMessageScreen,
    name: 'WriteMessageRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/aboutUs',
    page: AboutUsScreen,
    name: 'AboutUsRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/help',
    page: HelpScreen,
    name: 'HelpRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: 'addListing',
    page: AddListingScreen,
    name: 'AddListingTabRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/impressum',
    page: ImpressumScreen,
    name: 'ImpressumRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/paymore',
    page: PayMoreScreen,
    name: 'PayMoreRoute',
    guards: [AuthGuard],
  ),
  AutoRoute(
    path: '/terms',
    page: TermsScreen,
    name: 'TermsRoute',
    guards: [AuthGuard],
  )
])
// extend the generated private router
class AppRouter extends _$AppRouter {
  final AuthGuard authGuard;

  AppRouter({required this.authGuard}) : super(authGuard: authGuard);
}

What I have tried:

I didn't really find something useful to try