从视频导出帧并在Flutter Container中显示图片的问题

核心错误点 #

你的代码存在两个关键问题，直接导致了缩略图数组索引为空的错误：

1. setState回调使用异步函数：setState的参数是同步的VoidCallback，不能传入async函数。这种写法会让异步导出缩略图的操作和状态更新完全脱节，UI可能在videoThumbs还未填充数据时就开始渲染，触发索引越界。
2. 渲染时未判断数组长度：直接访问videoThumbs[i]，没有考虑数据还在异步加载中的情况，导致索引超出数组实际长度。

修正后的代码 #

1. 重构视频与缩略图加载逻辑

把异步操作从setState回调中移出，等所有缩略图导出完成后再统一更新状态：

// 移出setState，先执行所有异步操作
if (result!.files.isNotEmpty) {
  final List<File> newVideos = [];
  final List<File> newThumbs = [];

  for (PlatformFile item in result.files) {
    final videoFile = File(item.path!);
    newVideos.add(videoFile);

    final duration = Duration(seconds: 1);
    // 注意捕获导出失败的情况，避免数组长度不一致
    final File? thumbImage = await ExportVideoFrame.exportImageBySeconds(videoFile, duration, 0);
    if (thumbImage != null) {
      newThumbs.add(thumbImage);
    } else {
      // 导出失败时添加默认占位图（需自行准备占位图文件）
      newThumbs.add(File('assets/default_video_thumb.png'));
    }
  }

  // 所有数据准备完成后，统一更新状态
  setState(() {
    videos.addAll(newVideos);
    videoThumbs.addAll(newThumbs);
  });
}

2. 安全渲染缩略图

渲染时先判断数组长度，避免索引越界，同时添加加载状态占位：

Container(
  width: 220,
  height: 220,
  color: colorPrimary,
  child: videoThumbs.length > i
      ? Image.file(
          videoThumbs[i],
          width: 100,
          height: 100,
          fit: BoxFit.fill,
        )
      : // 加载中的占位组件
        Center(child: CircularProgressIndicator()),
)

额外优化建议 #

• 可以把导出缩略图的操作放到compute函数中，避免在主线程执行耗时操作导致UI卡顿。
• 给ExportVideoFrame.exportImageBySeconds添加try-catch异常捕获，防止单个视频导出失败导致整个循环中断。

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