Flutter Web中用go_router实现侧边栏右侧区域导航

你可以通过嵌套路由+ShellRoute的方式实现侧边菜单固定、仅右侧内容区切换的效果，无需手动嵌套Navigator，go_router会帮你管理导航状态。具体实现步骤如下：

1. 修改GoRouter配置，使用ShellRoute作为父布局 #

将原来的同级路由改为嵌套在ShellRoute下，ShellRoute的builder负责渲染固定的侧边栏布局，子路由的页面会自动填充到右侧内容区：

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    ShellRoute(
      // 固定布局：侧边菜单 + 内容区
      builder: (context, state, child) {
        return Scaffold(
          body: Row(
            children: [
              const MenuWidget(), // 你的侧边菜单组件
              Expanded(child: child), // 子页面会渲染在这里
            ],
          ),
        );
      },
      // 子路由：对应各个内容页面
      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()),
        ),
      ],
    ),
  ],
);

2. 完善MenuWidget的导航逻辑 #

在侧边菜单组件中，使用context.go()触发路由跳转，此时只有右侧内容区会更新，侧边菜单保持不动：

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      color: Colors.grey[200],
      child: Column(
        children: [
          ListTile(
            title: const Text('首页'),
            onTap: () => context.go('/'),
          ),
          ListTile(
            title: const Text('Empire'),
            onTap: () => context.go('/empire'),
          ),
          ListTile(
            title: const Text('Chaos'),
            onTap: () => context.go('/chaos'),
          ),
        ],
      ),
    );
  }
}

3. 保留自定义过渡动画（可选） #

你原来的_buildCustomTransitionPage方法可以继续使用，它会为内容区的页面切换提供自定义过渡效果，不会影响固定布局：

Page<void> _buildCustomTransitionPage(Widget child) {
  return CustomTransitionPage(
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 这里是你的自定义过渡逻辑，比如淡入淡出、滑动等
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  );
}

效果说明 #

点击侧边菜单的按钮时，只有右侧的Expanded(child: child)区域会切换对应的页面（Info/Empire/Chaos），侧边菜单始终保持显示，完全符合你想要的局部导航效果。

内容的提问来源于stack exchange，提问作者steind.VY