Flutter Web Chrome二次进入全屏权限崩溃问题排查

1. 浏览器交互上下文限制：Chrome等现代浏览器要求全屏请求必须来自用户主动交互事件（比如点击、触摸），你的模拟流程里用Future.delayed延迟调用二次全屏，此时已经脱离了初始用户点击的事件上下文，浏览器会判定为非用户主动操作，直接拒绝权限请求。
2. 异步状态未同步：document.exitFullscreen()是异步操作，你的代码没有等待退出流程完成就发起二次全屏请求，可能导致浏览器内部全屏状态未更新，触发权限检查失败。

1. 确保全屏请求绑定用户主动交互 #

所有requestFullScreen的调用必须直接放在用户触发的回调里，比如按钮的onPressed、手势检测器的onTap：

GestureDetector(
  onTap: () {
    requestFullScreen(); // 直接在用户点击时触发，符合浏览器权限要求
  },
  child: const Text("进入全屏"),
)

绝对不能在Future.delayed、定时器或其他非用户触发的异步逻辑里调用全屏请求。

2. 同步全屏退出的异步状态 #

修改exitFullScreen为异步函数，确保退出完成后再发起下一次全屏请求：

Future<void> exitFullScreen() async {
  print("exiting fullscreen");
  if (document.fullscreenElement != null) { // 先检查是否处于全屏状态
    await document.exitFullscreen();
  }
}

调用时必须await退出操作：

// 正确的流程示例
requestFullScreen();
await Future.delayed(const Duration(seconds: 2));
await exitFullScreen(); // 等待退出完成
await Future.delayed(const Duration(seconds: 2));
requestFullScreen(); // 此时如果是用户主动触发的上下文，就能正常调用

3. 兼容浏览器的权限检查方案 #

window.navigator.permissions.request({name: "fullscreen"})支持度有限，改用document.fullscreenEnabled提前判断当前环境是否允许全屏：

void requestFullScreen() {
  print("entering fullscreen");
  // 提前检查是否允许全屏
  if (!document.fullscreenEnabled) {
    window.alert("当前浏览器或上下文不支持全屏模式");
    return;
  }
  Future<void>? future = document.documentElement?.requestFullscreen();
  future?.catchError(
    (Object obj) {
      window.alert("无法进入全屏模式，浏览器错误：${obj.toString()}");
      return;
    },
  );
}

这个API在所有支持全屏的浏览器里都有效，能提前过滤不支持的场景。

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