Flutter中设备返回退出按钮无法退出应用求助

核心问题 #

1. 错误嵌套MaterialApp：你在页面的build方法中返回了MaterialApp，但它应该是整个应用的根组件（通常放在main函数的runApp中）。嵌套的MaterialApp会创建独立的导航栈，导致返回事件的监听逻辑完全失效。
2. WillPopScope层级错误：它被放在了MaterialApp外层，无法捕获内部导航栈的返回事件，点击设备返回按钮时只会触发导航栈的回退操作，而非你定义的退出确认逻辑。

修正方案 #

1. 重构应用结构，将MaterialApp作为根组件

在main函数中设置MaterialApp为应用入口，把你的初始页面作为home参数：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const InitialPage(), // 你的初始页面
    );
  }
}

2. 在初始页面中正确使用WillPopScope

将WillPopScope直接包裹页面的Scaffold，确保它处于正确的导航上下文层级：

class InitialPage extends StatefulWidget {
  const InitialPage({super.key});

  @override
  State<InitialPage> createState() => _InitialPageState();
}

class _InitialPageState extends State<InitialPage> {
  Future<bool> _back() {
    return showDialog(
      context: context,
      builder: (BuildContext dialogContext) {
        return AlertDialog(
          title: const Text("确定要退出应用吗？"),
          actions: <Widget>[
            TextButton(
              child: const Text('确定', style: TextStyle(fontSize: 15, color: Colors.indigo)),
              onPressed: () {
                Navigator.of(dialogContext).pop(true);
              },
            ),
            TextButton(
              child: const Text('取消', style: TextStyle(fontSize: 15, color: Colors.indigo)),
              onPressed: () {
                Navigator.of(dialogContext).pop(false);
              },
            ),
          ],
        );
      }
    ).then((value) => value ?? false);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _back,
      child: SafeArea(
        child: Scaffold(
          body: Container(
            child: Padding(
              padding: const EdgeInsets.all(80.0),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      SizedBox(
                        height: 80,
                        width: 150,
                        child: OutlinedButton(
                          style: OutlinedButton.styleFrom(
                            side: BorderSide(width: 3.0, color: Colors.indigo.shade900),
                            backgroundColor: Colors.transparent,
                            shape: const StadiumBorder(),
                          ),
                          child: const Text("LETS START"),
                          onPressed: () {
                            Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => const homepage(langname: ''),
                            ));
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

额外说明 #

如果你的homepage页面也需要自定义返回逻辑，同样要在其Scaffold外层包裹WillPopScope，否则从homepage点击返回会直接回到初始页面。

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