Flutter：如何用Chewie将视频适配1:1容器且不变形

要实现1:1比例展示视频且不拉伸变形，核心是让视频保持原始宽高比，在1:1的容器内居中显示，多余区域用黑边填充，以下是两种可行的实现方式：

方法一：AspectRatio + Chewie fit配置 #

直接用AspectRatio组件固定容器为1:1比例，同时在ChewieController中设置视频的适配模式为BoxFit.contain，这是最简单有效的方案：

AspectRatio(
  aspectRatio: 1.0, // 强制1:1宽高比
  child: Chewie(
    controller: ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: false,
      fit: BoxFit.contain, // 关键：保持视频原比例，超出部分留黑边
      // 可选：隐藏不需要的控件，比如进度条、全屏按钮
      // showControls: false,
    ),
  ),
)

方法二：FittedBox + 固定尺寸容器 #

如果AspectRatio方案没生效，可以尝试用FittedBox配合固定宽高的SizedBox，确保视频在1:1范围内按原比例适配：

FittedBox(
  fit: BoxFit.contain,
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.width, // 宽高相等，实现1:1
    child: Chewie(
      controller: _chewieController,
    ),
  ),
)

注意事项 #

• 确保VideoPlayerController已经完成初始化，否则Chewie无法获取视频的原始宽高比，可能导致适配异常。可以通过监听_videoPlayerController.value.isInitialized来判断，在初始化完成后再渲染Chewie组件。
• 不要使用BoxFit.fill（Chewie默认值），这会强制视频拉伸填满容器，导致变形。

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