Flutter中如何让Chewie视频播放器实现响应式布局？

问题核心 #

你尝试将Chewie组件放入SizedBox或使用AspectRatio属性，但始终无法实现移动/平板的跨设备响应式适配，根源在于两点：

• 未正确初始化VideoPlayerController，无法获取视频原生宽高比，导致尺寸计算异常
• Column组件未给Chewie提供明确的布局约束，直接放置会导致尺寸无法自适应容器

修复方案 #

1. 完成视频控制器初始化 #

取消注释初始化代码，必须等待控制器初始化完成后再创建ChewieController，否则无法获取视频的宽高信息：

videoPlayerController = VideoPlayerController.network(
  "https://player.vimeo.com/progressive_redirect/playback/738271412/rendition/1080p/file.mp4?loc=external&signature=b4ac532ca6f446de3a53ba9e29a5d7e54f3bca0acb5ae61528a44d75222a0ef8"
);

// 必须等待初始化完成，才能获取视频宽高比
await videoPlayerController.initialize();

chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: false,
);

2. 给Column中的Chewie添加响应式约束 #

使用Expanded + AspectRatio组合，让Chewie在Column中占据可用空间的同时，保持视频原生宽高比，实现跨设备适配：

Column(
  children: [
    // 其他业务组件
    Expanded(
      child: AspectRatio(
        // 优先使用视频原生宽高比，也可手动指定如16/9
        aspectRatio: videoPlayerController.value.aspectRatio,
        child: Chewie(
          controller: chewieController,
        ),
      ),
    ),
    // 其他业务组件
  ],
)

3. 补充生命周期管理 #

页面销毁时释放控制器，避免内存泄漏：

@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

效果说明 #

修改后，Chewie组件会自适应Column的可用空间，同时保持视频的正确比例，在移动设备和平板上都能实现响应式显示。

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