如何实现Flutter中VideoPlayer视频播放器的响应式自适应布局？

问题根因 #

你当前的代码存在核心逻辑错误导致拉伸：

1. FittedBox 的子组件被强制绑定了当前页面的实时宽高，破坏了视频的原始宽高比。FittedBox 需要基于子组件的原始尺寸做缩放适配，而非子组件跟随父级尺寸变化。
2. 未监听视频初始化完成状态，视频加载完成后没有触发重绘，窗口 resize 时也没有触发视频组件重新适配。
3. 附加风险：代码中未对 _videoCOntroller 做初始化就直接强制解包调用方法，存在空指针崩溃风险。

修复步骤 #

• 补充 VideoPlayerController 的初始化逻辑，监听视频加载完成事件，获取视频原始宽高比
• 用 AspectRatio 组件包裹 VideoPlayer，绑定视频的原始宽高比，保证视频比例不会被强行修改
• 外层保留 FittedBox 并设置 BoxFit.cover，让视频等比例缩放铺满容器，多余部分自动裁剪
• 移除子组件硬编码的宽高绑定，适配页面尺寸变化时的自动重绘

如果需要保留你原有的 Stack 布局和自定义悬浮层，只需要把下述视频渲染部分的代码替换到你原有 Container 的位置即可，Positioned 的自定义层可以正常添加。

修复后代码示例 #

class WelcomePage extends StatefulWidget {
  // 替换为你自己的视频资源地址
  final String videoPath;
  const WelcomePage({super.key, required this.videoPath});

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  VideoPlayerController? _videoController;

  @override
  void initState() {
    super.initState();
    // 先初始化控制器再调用方法，避免空指针
    _videoController = VideoPlayerController.asset(widget.videoPath);
    // 网络视频用这个：_videoController = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl));
    _videoController!.initialize().then((_) {
      setState(() {}); // 初始化完成触发重绘，渲染视频
      _videoController!.play();
      _videoController!.setLooping(true);
    });
  }

  @override
  void dispose() {
    // 页面销毁释放控制器，避免内存泄漏
    _videoController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand( // 直接铺满整个页面
        child: _videoController?.value.isInitialized ?? false
            ? FittedBox(
                fit: BoxFit.cover,
                // 用视频原始宽高比包裹，保证比例不会变形
                child: AspectRatio(
                  aspectRatio: _videoController!.value.aspectRatio,
                  child: VideoPlayer(_videoController!),
                ),
              )
            : const Center(child: CircularProgressIndicator()), // 加载中占位
      ),
    );
  }
}

效果参考 #

正常全屏效果	原问题变形效果

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