Flutter中如何为VideoPlayer实现类似BoxFit.cover的比例适配？

我正在开发一个视频展示Widget，希望用户点击按钮时可将其比例切换为1/1、4/3或3/4。尝试使用FittedBox并设置fit为BoxFit.cover时，出现“TextureBox对象在布局期间被赋予无限尺寸”的错误，报错关联组件为VideoPlayer。改用ClipRRect虽能切换比例，但无法实现BoxFit.cover的适配效果。

我的实现代码如下：

AspectRatio(
  aspectRatio: controller.ratio.value == 0
      ? 1 / 1
      : controller.ratio.value == 1
          ? 4 / 3
          : 3 / 4,
  child: ClipRRect(
      child: VideoPlayer(videoController!)),
)

请问如何让视频适配指定比例？是否需要更换其他视频播放器包？

• 无需更换播放器包，调整组件嵌套结构即可解决问题：把VideoPlayer用SizedBox包裹指定原始视频尺寸，再放入FittedBox中，最后套进AspectRatio容器。这样既可以用BoxFit.cover实现适配效果，又能避免无限尺寸错误。示例代码：

AspectRatio(
  aspectRatio: controller.ratio.value == 0
      ? 1 / 1
      : controller.ratio.value == 1
          ? 4 / 3
          : 3 / 4,
  child: FittedBox(
    fit: BoxFit.cover,
    child: SizedBox(
      width: videoController?.value.size.width ?? 0,
      height: videoController?.value.size.height ?? 0,
      child: VideoPlayer(videoController!),
    ),
  ),
)

原理：SizedBox给VideoPlayer提供了明确的原始尺寸约束，FittedBox基于这个尺寸按BoxFit.cover规则缩放，适配外层AspectRatio的比例容器。

• 如果需要裁切视频超出容器的部分，可在AspectRatio外层添加ClipRRect（或ClipRect），按需设置圆角即可：

ClipRRect(
  borderRadius: BorderRadius.zero, // 按需修改圆角大小
  child: AspectRatio(
    aspectRatio: controller.ratio.value == 0
        ? 1 / 1
        : controller.ratio.value == 1
            ? 4 / 3
            : 3 / 4,
    child: FittedBox(
      fit: BoxFit.cover,
      child: SizedBox(
        width: videoController?.value.size.width ?? 0,
        height: videoController?.value.size.height ?? 0,
        child: VideoPlayer(videoController!),
      ),
    ),
  ),
)

• 额外注意：要确保videoController初始化完成后再渲染布局，避免因初始宽高为0导致的短暂空白，可添加判断逻辑：

if (videoController?.value.isInitialized ?? false) {
  // 上述完整布局代码
} else {
  // 加载状态占位Widget
  const Center(child: CircularProgressIndicator());
}

内容的提问来源于stack exchange，提问作者황희윤