Displaying navigation to the right of the drawer/sidebar

Question

I am making a website (pet project) for myself and I want navigation to take place in a certain area, and not on the entire page. I understand how to do this with React, but not on Flutter, since I have never done web development with it. For navigation, I use the go_router package version 6.3.

I understand that you can do something like the following, but I don't know how to do it with go_router (no ideas :C)

Scaffold(
  body: Row(
    children: [
      MenuWidget(),
      Expanded(child: Navigator()),
    ]
  ),
);

GoRouter:

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      pageBuilder: (context, state) =>
          _buildCustomTransitionPage(const Info()),
    ),
    GoRoute(
      path: '/empire',
      pageBuilder: (context, state) =>
          _buildCustomTransitionPage(const Empire()),
    ),
    GoRoute(
      path: '/chaos',
      pageBuilder: (context, state) =>
          _buildCustomTransitionPage(const Chaos()),
    ),

Screen, what I want to do to do:

score 0 · Accepted Answer · answered May 18 '23 at 05:27

I solved this problem using ShellRoute (link to documentation enter link description here) and the following code as a skeleton:

return Row(
  children: [
    Menu(),
    Expanded(child: child),
])

where the child inside Expanded is what the ShellRoute accepts

Displaying navigation to the right of the drawer/sidebar

1 Answers1