如何在Flutter WebView中启用全屏，点击YouTube全屏按钮自动切换横屏

你需要借助webview_flutter提供的全屏回调监听，结合系统屏幕方向设置能力完成需求，具体修改如下：

第一步：导入依赖包 #

首先在文件头部导入屏幕控制相关的包：

import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

第二步：修改代码逻辑 #

核心是给WebView添加onShowCustomView和onHideCustomView回调，分别处理进入全屏、退出全屏时的屏幕方向切换，完整修改后的代码如下：

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  // 保存进入全屏前的屏幕方向，退出时可以恢复，低版本Flutter可删除该变量
  List<DeviceOrientation>? _preExitOrientations;

  @override
  void dispose() {
    // 页面销毁时恢复默认屏幕方向
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body:Center(
        child: WebView(
            initialUrl: 'https://youtube.com/',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            // 进入全屏回调（用户点击YouTube全屏按钮时触发）
            onShowCustomView: (view, onCustomViewHidden) {
              // 低版本Flutter不支持latestOrientation可删除以下两行
              _preExitOrientations = SystemChrome.latestOrientation != null 
                ? [SystemChrome.latestOrientation!] 
                : [DeviceOrientation.portraitUp];
              // 设置为支持横屏两个方向
              SystemChrome.setPreferredOrientations([
                DeviceOrientation.landscapeLeft,
                DeviceOrientation.landscapeRight,
              ]);
            },
            // 退出全屏回调
            onHideCustomView: () {
              // 恢复之前的方向配置，低版本Flutter可直接固定恢复为竖屏
              if(_preExitOrientations != null) {
                SystemChrome.setPreferredOrientations(_preExitOrientations!);
              }else{
                SystemChrome.setPreferredOrientations([
                  DeviceOrientation.portraitUp,
                ]);
              }
            },
        ),
      )
    ));
  }
}

补充说明 #

• 如果你的应用其他页面本身支持横竖屏切换，可以在退出全屏时直接设置为你应用的全局默认方向配置即可，不需要保存之前的方向
• Android端无需额外配置，iOS端如果出现方向不生效的情况，需要确认Xcode项目的Device Orientation配置里已经勾选了Landscape Left和Landscape Right选项

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