如何修复Flutter中Drawer无法在两页面间双向导航的问题？

问题原因 #

你遇到的双向导航失效，大概率是因为错误使用了pop()而非直接导航到目标路由，或是路由跳转方式导致导航栈异常（比如用replace替代push）。pop()仅用于返回上一级页面，但若当前页面是栈顶且无上级时，pop()就会失效；而直接指定目标路由的导航方式，能确保无论当前在哪个页面，都能正确切换。

解决方案 #

以下是修正后的完整实现代码，核心是统一使用Routemaster.of(context).navigate()跳转路由，并抽离公共Drawer组件保证逻辑一致性：

1. 路由配置

import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

final routes = RouteMap(
  routes: {
    '/': (_) => const MaterialPage(child: FirstPage()),
    '/second': (_) => const MaterialPage(child: SecondPage()),
  },
);

2. 公共Drawer组件

Widget buildDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        const DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('导航菜单'),
        ),
        ListTile(
          title: const Text('First页面'),
          onTap: () {
            Routemaster.of(context).navigate('/'); // 直接跳转到首页路由
            Navigator.pop(context); // 关闭Drawer
          },
        ),
        ListTile(
          title: const Text('Second页面'),
          onTap: () {
            Routemaster.of(context).navigate('/second'); // 直接跳转到Second路由
            Navigator.pop(context); // 关闭Drawer
          },
        ),
      ],
    ),
  );
}

3. 页面实现

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      drawer: buildDrawer(context),
      body: const Center(child: Text('First Page 内容')),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
      drawer: buildDrawer(context),
      body: const Center(child: Text('Second Page 内容')),
    );
  }
}

4. 初始化Routemaster

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
      routeInformationParser: const RoutemasterParser(),
      title: 'Drawer导航示例',
    );
  }
}

关键说明 #

• 用navigate()替代pop()：navigate()会直接根据路由表定位到目标页面，不受当前导航栈状态影响，完美解决双向切换问题。
• 抽离公共Drawer：避免每个页面重复编写Drawer逻辑，确保所有页面的导航行为一致。
• 点击菜单后关闭Drawer：通过Navigator.pop(context)在跳转后关闭Drawer，提升用户体验。

内容的提问来源于stack exchange，提问作者Onjrew