Flutter routing in web as single page application

I have a dashboard on web, which have common layout like side menu on web and on change its view will reflect.

I have setup route like this:

final GoRouter _router = GoRouter(routes: <RouteBase>[
  GoRoute(
    path: '/',
    builder: (BuildContext context, GoRouterState state) {
      return const LoginScreen();
    },
  ),
  GoRoute(
      path: '/dashboard',
      builder: (BuildContext context, GoRouterState state) {
        return const Dashboard();
      },
      routes: [
        GoRoute(
          path: 'home',
          builder: (BuildContext context, GoRouterState state) {
            return const HomeScreen();
          },
        ),
        GoRoute(
          path: 'home2',
          builder: (BuildContext context, GoRouterState state) {
            return const Home2Screen();
          },
        ),
      ]),
]);

I need to know is it not possible like I fix side menu and route on dashboard screen and it will change in view.

Example:

class Dashboard extends StatelessWidget {
  const Dashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
         SideMenu(),
         Route() //Home or Home1 
        ],
      ),
    );
  }
}

So here is side menu and route. Some if url route is /dashboard/home or /dashboard/home1 it will change the Route view? Because if I added a side menu in each file of home or home1 then there will be screen change visible on it which I don't want.

Inside your GoRouter, create a shell route like this:

final rootNavigatorKey = GlobalKey<NavigatorState>();

final _shellNavigatorKey = GlobalKey<NavigatorState>();

final GoRouter _router = GoRouter(
navigatorKey: rootNavigatorKey,
routes: <RouteBase>[
  GoRoute(
    path: '/',
    builder: (BuildContext context, GoRouterState state) {
      return const LoginScreen();
    },
  ),
  ShellRoute(
        navigatorKey: _shellNavigatorKey,
        builder: (BuildContext context, GoRouterState state, Widget child) {
          return Dashboard(child: child);
        },
        routes: [
          GoRoute(
            name: RouteConstants.homeScreenRoute,
            path: '/home',
            pageBuilder: (context, state) => const NoTransitionPage(
              child: HomeScreen(),
            ),
          ),
          GoRoute(
            name: RouteConstants.home2ScreenRoute,
            path: '/home2',
            pageBuilder: (context, state) => const NoTransitionPage(
              child: Home2Screen(),
            ),
          ),
        ],
      ),
  
]);

And your dashboard page can be like:

class Dashboard extends StatelessWidget {
  final Widget child;

  const BottomNavigation({
    Key? key,
    required this.child,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _calculateSelectedIndex(context),
        onTap: (int idx) => onTap(idx, context),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Home2'),

        ],
      ),
    );
  }

  int _calculateSelectedIndex(BuildContext context) {
    final GoRouter route = GoRouter.of(context);
    final String location = route.location;
    if (location == RouteConstants.homeScreenRoute) {
      return 0;
    } else if (location == RouteConstants.home2ScreenRoute) {
      return 1;
    }
    return 0;
  }

  void onTap(int index, BuildContext context) {
    switch (index) {
      case 0:
        context.go(RouteConstants.homeScreenRoute);
        break;

      case 1:
        context.go(RouteConstants.home2ScreenRoute);
        break;

      default:
        return context.go(RouteConstants.homeScreenRoute);
    }
  }
}

You can use "Stateful Nested Routes" for your problem. You can actually think of the side menu as a bottom navigation bar. This way you won't have to add a side menu to all the screens.

I put a small example for you.

Scaffold(
  body: /* TODO: decide which page to show, depending on the selected index */,
  bottomNavigationBar: NavigationBar(
    selectedIndex: /* TODO: where does this come from? */,
    destinations: const [
      // the appearance of each tab is defined with a [NavigationDestination] widget
      NavigationDestination(label: 'Section A', icon: Icon(Icons.home)),
      NavigationDestination(label: 'Section B', icon: Icon(Icons.settings)),
    ],
    onDestinationSelected: (index) { /* TODO: move to the tab at index */ },
  ),
)

And you can access more information about Nested Routes of Go Router from here: https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter/

But maybe this using does not match your path "/dashboard/home". You must check if your URL structure is important.

you can try ShellRoute

    ShellRoute(
  builder: (BuildContext context, GoRouterState state, Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (BuildContext context, GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
),

in this example, appbar with the text App Shell will be constant but when you change it to a route it will render Text('Child Route "/a"') widget inside the ShellRoute body property.