Flutter调用Navigator.pop()点击Drawer菜单项无法关闭侧边栏如何解决

问题根源 #

你当前代码中调用Navigator.pop(context)使用的context是_MyAppState.build方法传入的根context，该context位于MaterialApp的上层，无法访问到MaterialApp内部自动创建的Navigator实例，因此pop操作无效，Drawer无法正常关闭。

解决方案 #

有两种常用的修复方式，任选其一即可：

• 方案1：通过GlobalKey控制Scaffold关闭Drawer（推荐，无需调整组件结构）
  1. 在_MyAppState中定义Scaffold对应的GlobalKey
  2. 将key绑定到Scaffold组件
  3. 点击菜单项时调用closeDrawer方法关闭侧边栏，替换原有Navigator.pop逻辑
     完整修改示例：

  class _MyAppState extends State<MyApp> {
    int _modIndex = 0;
    // 新增全局Key
    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          // 绑定Key
          key: _scaffoldKey,
          drawer: Drawer(
            child: ListView(
              children: [
                DrawerHeader(child: Text('Choose a mod'),),
                ListTile(
                  title: const Text('Wheels'),
                  onTap: () {
                    setState(() {
                      _modIndex = 0;
                    });
                    // 替换Navigator.pop
                    _scaffoldKey.currentState?.closeDrawer();
                  },
                ),
                ListTile(
                  title: const Text('Suspension'),
                  onTap: () {
                    setState(() {
                      _modIndex = 1;
                    });
                    _scaffoldKey.currentState?.closeDrawer();
                  },
                ),
                ListTile(
                  title: const Text('Body Colour'),
                  onTap: () {
                    setState(() {
                      _modIndex = 2;
                    });
                    _scaffoldKey.currentState?.closeDrawer();
                  },
                )
              ],
            ),
          ),
          // 剩余原有代码
        ),
      );
    }
  }
  

• 方案2：用Builder包裹Drawer内部组件，获取下层有效context
  为Drawer的子组件包裹Builder，生成位于MaterialApp下层的新context，此时调用Navigator.pop即可正常生效：

  drawer: Drawer(
    child: Builder(
      builder: (context) { // 此处的context为MaterialApp下层的有效context
        return ListView(
          // 原有ListView的所有子组件不变，onTap中的Navigator.pop可正常运行
        );
      },
    ),
  )
  

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