Flutter中如何在用户点击窗口栏关闭按钮前显示提示消息？

在Flutter中处理Chromebook（桌面端）窗口关闭事件，核心是监听应用的退出请求，以下是两种可行的实现方式：

方法一：通过WidgetsBindingObserver监听退出请求 #

1. 让页面的State类混入WidgetsBindingObserver
2. 在初始化时注册观察者，销毁时移除
3. 重写didRequestAppExit方法，在其中弹出确认对话框，控制是否允许应用退出

示例代码：

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Future<bool> didRequestAppExit() async {
    final shouldExit = await showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('确认退出'),
        content: const Text('确定要关闭应用吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text('确定'),
          ),
        ],
      ),
    );
    // 返回true允许退出，返回false阻止退出
    return shouldExit ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('测试应用')),
      body: const Center(child: Text('点击窗口X按钮测试关闭提示')),
    );
  }
}

方法二：通过SystemChannels拦截平台退出事件 #

直接监听平台通道的退出请求，弹窗确认后再决定是否退出应用：

示例代码：

import 'package:flutter/services.dart';

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    SystemChannels.platform.setMethodCallHandler((call) async {
      if (call.method == 'quit') {
        final shouldExit = await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: const Text('确认退出'),
            content: const Text('确定要关闭应用吗？'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: const Text('取消'),
              ),
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                  // 用户确认后主动触发应用退出
                  SystemChannels.platform.invokeMethod('SystemNavigator.pop');
                },
                child: const Text('确定'),
              ),
            ],
          ),
        );
        // 返回false阻止默认退出行为
        return Future.value(false);
      }
      return Future.value(null);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('测试应用')),
      body: const Center(child: Text('点击窗口X按钮测试关闭提示')),
    );
  }
}

注意事项 #

• 两种方案均适用于ChromeOS上通过Play Store安装的Flutter应用，窗口关闭事件会被Flutter的平台层捕获
• 若应用为多页面结构，确保对话框能在当前页面上下文正常弹出，必要时可使用全局Key管理上下文

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