Flutter中youtube_player_flutter如何实现BoxFit.cover铺满容器

ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: SizedBox(
        height: height ?? context.height * 0.225,
        width: width ?? context.width * 0.65,
        child: FittedBox(
    fit: BoxFit.fill,
    child: YoutubePlayer(
      controller: youtubeVidPlayerG.youtubeController(
          youtubeIDs, randomNum, mute),
      bottomActions: [],
      onEnded: (d) async {
        youtubeVidPlayerG
            .youtubeController(youtubeIDs, randomNum, mute)
            .load(
              youtubeIDs[(youtubeIDs.indexOf(d.videoId) + 1) %
              youtubeIDs.length],
            );
      },
    ),
  )

• 视频1参考效果：，可完全铺满SizedBox区域
• 视频2参考效果：，视频上下存在黑色空白区域

项目使用youtube_player_flutter包展示YouTube视频，需要拉伸视频填满容器空白区域。目前已尝试设置BoxFit.fill、BoxFit.cover属性均无法消除视频上下黑边，期望实现视频完全铺满指定SizedBox的宽高，可接受视频出现轻微拉伸变形。

外层FittedBox的fit属性修改无效，核心原因是上下黑边是播放器内部WebView渲染视频时按原始比例生成的，外层容器的拉伸规则仅作用于YoutubePlayer组件本身，无法影响组件内部的视频渲染逻辑。

按照以下步骤修改即可实现需求：

1. 删除外层多余的FittedBox组件，该组件无法处理内部渲染层产生的黑边
2. 为YoutubePlayer添加两个关键参数：
   • aspectRatio：传入外层SizedBox的宽高比（宽度/高度），强制播放器组件尺寸完全匹配容器
   • videoFit: VideoFit.fill：强制视频内容拉伸填满整个播放器区域，忽略原始视频比例，允许轻微拉伸变形

修改后的完整代码如下：

ClipRRect(
  borderRadius: BorderRadius.circular(15),
  child: SizedBox(
    height: height ?? context.height * 0.225,
    width: width ?? context.width * 0.65,
    child: YoutubePlayer(
      controller: youtubeVidPlayerG.youtubeController(
        youtubeIDs, randomNum, mute
      ),
      // 强制匹配容器宽高比
      aspectRatio: (width ?? context.width * 0.65) / (height ?? context.height * 0.225),
      // 强制拉伸视频填满区域，接受轻微变形
      videoFit: VideoFit.fill,
      bottomActions: const [],
      onEnded: (d) async {
        youtubeVidPlayerG
            .youtubeController(youtubeIDs, randomNum, mute)
            .load(
              youtubeIDs[(youtubeIDs.indexOf(d.videoId) + 1) %
              youtubeIDs.length],
            );
      },
    ),
  ),
)

补充：如果不希望视频拉伸变形，可将VideoFit.fill换成VideoFit.cover，该模式会自动裁剪视频边缘多余部分填满容器，也不会出现黑边。

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