How can I remove NavigationBottomBar after transitioning to the detail screen without significantly changing the structure of the route?

[MasatoYamamotoo]

Hello,

As the title says, is there a way to hide the navigation bar when transitioning to the detail screen in the following full code route structure?

Running the generate command with the following full code will work

full code

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_engineer_codecheck/presentation/view/pages/create_issue_code.gr.dart';

void main() {
  runApp(App());
}

final _appRouter = AppRouter();

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends RootStackRouter {
  @override
  RouteType get defaultRouteType => const RouteType.material();

  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/',
          page: BoardRouterRoute.page,
          children: [
            AutoRoute(
              page: FirstRouterRoute.page,
              children: [
                AutoRoute(
                  initial: true,
                  page: FirstRoute.page,
                ),
                AutoRoute(page: FirstDetailRoute.page),
              ],
            ),
            AutoRoute(
              page: SecondRoute.page,
            ),
          ],
        ),
      ];
}

@RoutePage()
class BoardRouterPage extends StatelessWidget {
  const BoardRouterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
      routes: [
        FirstRouterRoute(),
        SecondRoute(),
      ],
      bottomNavigationBuilder: (_, tabsRouter) {
        return BottomNavigationBar(
          currentIndex: tabsRouter.activeIndex,
          onTap: tabsRouter.setActiveIndex,
          items: const [
            BottomNavigationBarItem(label: 'first', icon: Text('first')),
            BottomNavigationBarItem(label: 'second', icon: Text('second')),
          ],
        );
      },
    );
  }
}

@RoutePage()
class FirstRouterPage extends AutoRouter {
  const FirstRouterPage({super.key});
}

@RoutePage()
class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.router.push(FirstDetailRoute());
              },
              child: Text('go to First detail page'),
            ),
          ],
        ),
      ),
    );
  }
}

@RoutePage()
class FirstDetailPage extends StatelessWidget {
  const FirstDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Detail Page'),
      ),
    );
  }
}

@RoutePage()
class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('second page'),
      ),
    );
  }
}

There are two workarounds I do not want to do.

1. If FirstDetailRoute is placed in the same hierarchy as BoardRouterRoute, it will behave as intended. However, we do not want to do this because it would make it difficult to understand the relationship.

@override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/',
          page: BoardRouterRoute.page,
          children: [
            AutoRoute(
              page: FirstRouterRoute.page,
              children: [
                AutoRoute(
                  initial: true,
                  page: FirstRoute.page,
                ),
                // AutoRoute(page: FirstDetailRoute.page),
              ],
            ),
            AutoRoute(
              page: SecondRoute.page,
            ),
            AutoRoute(page: FirstDetailRoute.page), //  I don't want to do it.
          ],
        ),
      ];

2. I also do not want to use flags to control whether NavigationBar is displayed or not, as this would reduce maintainability.

bottomNavigationBuilder: (_, tabsRouter) {
        if (!flag) return SizedBox.shrink();
        return BottomNavigationBar(
          currentIndex: tabsRouter.activeIndex,
          onTap: tabsRouter.setActiveIndex,
          items: const [
            BottomNavigationBarItem(label: 'first', icon: Text('first')),
            BottomNavigationBarItem(label: 'second', icon: Text('second')),
          ],
        );
      },

Please advise. advise🙇

[masal9pse]

I will use the following issue comment context.topRouteMatch.meta for flag management to maintain maintainability, so I will use this approach.

#732 (comment)