如何在Flutter Web应用中设置设备屏幕方向

SystemChrome.setPreferredOrientations 是Flutter封装的原生端系统API，仅支持Android、iOS等原生平台，Web端的方向控制依赖浏览器自身的Screen Orientation API，需要做平台兼容处理，具体实现方案如下：

实现步骤 #

1. 导入必要依赖 #

Flutter官方已提供Web端JS调用能力，无需额外引入第三方依赖，直接导入内置包即可：

import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
// 仅Web平台可用的html包
import 'dart:html' as html;

2. 封装跨平台方向设置方法 #

统一适配原生端和Web端的方向设置逻辑：

Future<void> setPreferredOrientations(List<DeviceOrientation> orientations) async {
  // 非Web场景走原有原生逻辑
  if (!kIsWeb) {
    await SystemChrome.setPreferredOrientations(orientations);
    return;
  }

  // Web场景映射Flutter方向枚举到浏览器支持的方向值
  List<String> webOrientationList = [];
  for (var ori in orientations) {
    switch (ori) {
      case DeviceOrientation.portraitUp:
        webOrientationList.add('portrait-primary');
        break;
      case DeviceOrientation.portraitDown:
        webOrientationList.add('portrait-secondary');
        break;
      case DeviceOrientation.landscapeLeft:
        webOrientationList.add('landscape-primary');
        break;
      case DeviceOrientation.landscapeRight:
        webOrientationList.add('landscape-secondary');
        break;
    }
  }

  // 调用浏览器方向锁定API
  try {
    await html.window.screen?.orientation?.lock(webOrientationList.first);
  } catch (err) {
    debugPrint('Web端方向锁定失败，当前浏览器不支持该API或调用时机不符合要求：$err');
  }
}

注意事项 #

• 浏览器安全策略限制：方向锁定API必须在用户交互事件的回调中调用（比如按钮点击、手势触发回调），页面初始化阶段直接调用会被浏览器拦截
• 兼容性问题：部分旧版浏览器、桌面端浏览器不支持方向锁定API，需要做好异常捕获和降级处理
• PWA场景优化：如果你的Web应用是PWA形式，可以在manifest.json配置文件中添加默认启动方向，示例配置：

{
  "name": "你的应用名称",
  "short_name": "应用简称",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait-primary"
}

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