Flutter中PopScope突然失效，设备返回键仍可返回上页

问题说明 #

在LoginScreen页面中设置PopScope(canPop: false)阻止用户返回上一页，此前功能正常，近期未修改PopScope相关代码，但点击设备返回键仍能回到上一页，给onPopInvoked添加async修饰符后问题依旧。

核心原因及解决办法 #

1. 导航器嵌套导致PopScope失效 #

从代码来看，LoginScreenColor是一个独立的MaterialApp，如果应用中存在多个MaterialApp（比如RegisterScreenColor也是一个MaterialApp），会出现导航器嵌套问题：

• 每个MaterialApp都会创建独立的导航器实例
• 设备返回键触发的是上层导航器的弹出操作，而LoginScreen中的PopScope仅对自身所在的内部导航器生效

修复方案：
整个应用只保留一个根MaterialApp，将LoginScreen、RegisterScreen等页面作为路由页面，而非独立的MaterialApp。

示例根App结构：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: const Color(0xfff51957),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xfff51957),
        ),
        inputDecorationTheme: const InputDecorationTheme(
          labelStyle: TextStyle(color: Color(0xfff51957)),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0xfff51957)),
          ),
        ),
      ),
      initialRoute: '/login',
      routes: {
        '/login': (context) => const LoginScreen(),
        '/register': (context) => const RegisterScreen(),
        '/preferences': (context) => const PreferencesScreen(),
      },
    );
  }
}

同时修改LoginScreenColor，移除内部的MaterialApp，直接返回PopScope包裹的页面内容。

2. 修正PopScope的onPopInvoked逻辑 #

onPopInvoked是void类型回调，无需返回值，且需要判断didPop参数——当canPop: false时，didPop会是false，此时才需要执行自定义弹窗逻辑：

PopScope(
  canPop: false,
  onPopInvoked: (bool didPop) async {
    // 仅当未发生pop操作时，触发弹窗
    if (!didPop) {
      await showDialog<void>(
        context: context,
        barrierDismissible: false, // 可选：禁止点击空白关闭弹窗
        builder: (BuildContext context) {
          return AlertDialog(
            backgroundColor: Colors.white,
            title: const Text(
              '请完成设置',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontFamily: 'Montserrat',
              ),
            ),
            content: const Text(
              '请先完成设置流程，所有设置均可在初始设置后修改。',
              style: TextStyle(
                fontSize: 20,
                fontFamily: 'Montserrat',
              ),
            ),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text(
                  '确定',
                  style: TextStyle(
                    color: Color(0xfff51957),
                    fontFamily: 'Montserrat',
                    fontSize: 20,
                  ),
                ),
              ),
            ],
          );
        },
      );
    }
  },
  child: Scaffold(
    // 原有页面内容
  ),
)

3. 统一路由跳转方式 #

确保页面跳转时使用同一导航器的方法，比如Navigator.pushNamed或Navigator.push，避免跳转至新的MaterialApp：

示例LoginScreen中的注册跳转：

GestureDetector(
  onTap: () {
    Navigator.pushNamed(context, '/register');
  },
  child: Text(
    'Register',
    style: GoogleFonts.montserrat(
      fontSize: 16.0,
      fontWeight: FontWeight.bold,
    ),
  ),
)

验证效果 #

完成上述修改后，点击设备返回键会弹出提示对话框，不会回到上一页；点击对话框的「确定」按钮，弹窗关闭后仍停留在LoginScreen页面。

内容的提问来源于stack exchange，提问作者Pierre van der Merwe