How to persist bottom navigation bar and App bar using GoRouter?

Question

I'm trying to achieve a page where bottom navigation and app bar are fixed. But when I pressed a button it will go to another page without recreating the app bar and bottom nav bar. For routing I'm using go_router package.

There is an answer using Navigator here. But is there any way to make it using go_router?

Example Page:

Example Home Page:

Answer 1

Use ShellRouter with GoRouter to meet your requirement!

---

Router

final _rootNavigatorKey = GlobalKey<NavigatorState>();
final _shellNavigatorKey = GlobalKey<NavigatorState>();

final router = GoRouter(
  initialLocation: '/',
  navigatorKey: _rootNavigatorKey,
  routes: [
    ShellRoute(
      navigatorKey: _shellNavigatorKey,
      pageBuilder: (context, state, child) {
        print(state.location);
        return NoTransitionPage(
            child: ScaffoldAppAndBottomBar(child: child));
      },
      routes: [
        GoRoute(
          parentNavigatorKey: _shellNavigatorKey,
          path: '/home',
          pageBuilder: (context, state) {
            return NoTransitionPage(
              child: Scaffold(
                body: const Center(
                  child: Text("Home"),
                ),
              ),
            );
          },
        ),
        GoRoute(
          path: '/',
          parentNavigatorKey: _shellNavigatorKey,
          pageBuilder: (context, state) {
            return const NoTransitionPage(
              child: Scaffold(
                body: Center(child: Text("Initial")),
              ),
            );
          },
        ),
      ],
    ),
  ],
);

ScaffoldAppAndBottomBar

class ScaffoldAppAndBottomBar extends StatelessWidget {
  Widget child;
  ScaffoldAppAndBottomBar({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            "App Bar",
          ),
          backgroundColor: Colors.amber,
        ),
        body: SafeArea(child: child),
        bottomNavigationBar: Container(
          color: Colors.blue,
          height: 56,
          width: double.infinity,
          child: const Center(child: Text("Bottom Navigation Bar")),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {
            context.go('/home');
          },
          child: const Icon(Icons.home),
        ));
  }
}

---

Output:

Initially

After pressing floating button

---

Refer detailed code and explaination of bottom NavigationBar using ShellRoute and GoRouter here

Answer 2

It is still not solved in official release, but you can check this work in progress https://github.com/flutter/packages/pull/2650. This solves the problem perfectly, hopefully it is merged soon