Flutter VideoPlayer横屏模式全屏显示问题求助

在Flutter 3.24.3、Dart 3.5.3环境中，使用VideoPlayer结合Chewie实现视频播放时，横屏模式下存在安全区域留白，无法实现真正的全屏显示。以下是针对性解决方案：

一、核心问题分析 #

1. 当前布局嵌套多层SizedBox，限制了视频的自适应全屏能力
2. 系统UI隐藏不彻底，安全区域约束未移除
3. Chewie控制器缺少全屏适配的关键配置

二、分步解决方案 #

1. 彻底处理系统UI与安全区域 #

在页面初始化时强制隐藏所有系统UI，并移除安全区域的默认内边距；页面销毁时恢复系统默认设置，避免影响其他页面。

2. 优化视频布局结构 #

移除多余的SizedBox嵌套，直接让Chewie组件填充整个父容器，配合自适应布局实现全屏。

3. 调整ChewieController配置 #

开启全屏默认模式，设置适配横屏的宽高比和方向约束。

三、修改后的关键代码 #

PlayerPage.dart 核心修改 #

@override
void initState() {
  updateInfo();
  super.initState();
  
  // 强制横屏并彻底隐藏系统UI
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ));
}

@override
void dispose() {
  // 恢复系统默认设置
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    // 完全移除安全区域约束
    body: SafeArea(
      left: false,
      right: false,
      top: false,
      bottom: false,
      child: GetBuilder<VideoController>(
        builder: (_) {
          if (controller.chewieController != null &&
              controller.chewieController!.videoPlayerController.value.isInitialized) {
            return GestureDetector(
              onTap: () {
                controller.autoHideChannelList.value = !controller.autoHideChannelList.value;
              },
              child: Stack(
                children: [
                  // 直接用Chewie填充全屏
                  Positioned.fill(
                    child: Chewie(
                      key: Key(controller.chewieController!
                          .videoPlayerController.value.position.inSeconds
                          .toString()),
                      controller: controller.chewieController!,
                    ),
                  ),
                  // 自定义Overlay代码保持原有逻辑即可
                ],
              ),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    ),
  );
}

控制器中Chewie配置修改 #

chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  showControls: true,
  showControlsOnInitialize: true,
  autoPlay: true,
  looping: false,
  allowFullScreen: true,
  allowMuting: false,
  isLive: videoUrl.contains('.m3u8'),
  // 添加全屏适配配置
  fullScreenByDefault: true,
  aspectRatio: MediaQuery.of(Get.context!).size.aspectRatio,
  deviceOrientationsOnFullScreen: [
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ],
);

main.dart 可选调整（全局方向控制） #

如果不需要全局强制横屏，可移除main中的方向锁定，由页面自行控制：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.dark,
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  
  // 移除全局强制横屏设置
  // await SystemChrome.setPreferredOrientations([
  //   DeviceOrientation.landscapeLeft,
  //   DeviceOrientation.landscapeRight,
  // ]);

  runApp(const MyApp());
}

四、效果说明 #

通过以上修改，视频将完全填充屏幕，不再受安全区域约束；系统UI会彻底隐藏，实现真正的横屏全屏播放效果。页面销毁时恢复系统默认设置，避免影响其他页面的正常显示。

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