Flutter video_player在Android TV播放视频出现侧边绿条，移动端正常求助

使用Flutter的video_player播放部分视频时，画面侧边出现绿色条块。该功能在移动端运行正常，但在Android TV（MBOX型号，Android 11.1系统）上播放时会出现此问题。

代码示例 #

class VideoWidget extends StatelessWidget {
  const VideoWidget({Key? key, required this.controller}) : super(key: key);
  final VideoPlayerController controller;

  @override
  Widget build(BuildContext context) {
    return Container(alignment: Alignment.topCenter, child: buildVideo());
  }

  Widget buildVideo() => Stack(
        fit: StackFit.expand,
        children: <Widget>[
          buildVideoPlayer(),
        ],
      );

  Widget buildVideoPlayer() => buildFullScreen(
        child: AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: VideoPlayer(controller),
        ),
      );

  Widget buildFullScreen({
    required Widget child,
  }) {
    final size = controller.value.size;
    final width = size.width;
    final height = size.height;
  
    return FittedBox(
      fit: BoxFit.fill,
      child: SizedBox(width: width,height: height, child: child),
    );
  }
} 

环境信息 #

• Flutter版本：3.0.2
• Video Player版本：2.4.5
• Android版本：11.1
• Android盒子型号：MBOX

解决方案 #

这个问题通常是Android TV端视频渲染时的尺寸对齐或格式兼容问题，可尝试以下几种修复方式：

1. 调整FittedBox的fit模式
   将BoxFit.fill替换为BoxFit.contain或BoxFit.cover，避免强制拉伸导致的渲染异常：

   return FittedBox(
     fit: BoxFit.contain, // 或BoxFit.cover
     child: SizedBox(width: width,height: height, child: child),
   );
   

2. 移除嵌套的冗余布局
   原代码中AspectRatio和FittedBox的组合可能导致尺寸计算冲突，简化布局逻辑：

Widget buildVideo() => SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: controller.value.size.width,
height: controller.value.size.height,
child: VideoPlayer(controller),
),
),
);

3. **升级依赖版本**
当前使用的Flutter和video_player版本较旧，升级到最新稳定版（如Flutter 3.16+、video_player 2.8+），官方可能已修复Android TV端的渲染bug。

4. **启用硬件加速**
在AndroidManifest.xml中为Activity添加硬件加速属性，确保视频渲染使用硬件加速：
```xml
<activity
    android:name=".MainActivity"
    android:hardwareAccelerated="true">
</activity>

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