Flutter中获取视频路径后生成缩略图并在ListViewBuilder中展示的方法

1. 添加依赖包 #

先在 pubspec.yaml 中引入核心依赖：

dependencies:
  flutter:
    sdk: flutter
  video_thumbnail: ^0.5.3  # 生成视频缩略图核心包
  permission_handler: ^10.2.0  # 处理存储权限
  path_provider: ^2.0.15  # 获取临时目录存储缩略图

执行 flutter pub get 安装依赖。

2. 配置平台权限 #

Android #

在 android/app/src/main/AndroidManifest.xml 中添加权限：

• Android 13+：

<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

• Android 12及以下：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS #

在 ios/Runner/Info.plist 中添加权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以加载视频缩略图</string>

3. 编写缩略图生成函数 #

封装异步函数处理缩略图生成逻辑：

import 'package:video_thumbnail/video_thumbnail.dart';
import 'package:path_provider/path_provider.dart';

Future<String?> generateVideoThumbnail(String videoPath) async {
  try {
    final tempDir = await getTemporaryDirectory();
    final thumbnailPath = await VideoThumbnail.thumbnailFile(
      video: videoPath,
      thumbnailPath: tempDir.path,
      imageFormat: ImageFormat.JPEG,
      maxHeight: 100,  // 缩略图高度，按需调整
      maxWidth: 150,   // 缩略图宽度，按需调整
      quality: 75,     // 图片质量，范围0-100
    );
    return thumbnailPath;
  } catch (e) {
    print('生成缩略图失败: $e');
    return null;
  }
}

4. 在 ListView.builder 中集成 #

利用 FutureBuilder 处理异步加载的缩略图，嵌入列表项：

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'dart:io';

class VideoThumbnailList extends StatefulWidget {
  final List<String> files;  // 传入你的视频路径列表

  const VideoThumbnailList({super.key, required this.files});

  @override
  State<VideoThumbnailList> createState() => _VideoThumbnailListState();
}

class _VideoThumbnailListState extends State<VideoThumbnailList> {
  bool _hasPermission = false;

  @override
  void initState() {
    super.initState();
    _checkStoragePermission();
  }

  Future<void> _checkStoragePermission() async {
    final status = await Permission.video.request();
    setState(() {
      _hasPermission = status.isGranted;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (!_hasPermission) {
      return const Center(child: Text('请授予视频访问权限'));
    }

    return ListView.builder(
      itemCount: widget.files.length,
      itemBuilder: (context, index) {
        final videoPath = widget.files[index];
        return ListTile(
          leading: FutureBuilder<String?>(
            future: generateVideoThumbnail(videoPath),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done && snapshot.data != null) {
                return Image.file(
                  File(snapshot.data!),
                  width: 150,
                  height: 100,
                  fit: BoxFit.cover,
                );
              }
              // 加载中占位
              return const SizedBox(
                width: 150,
                height: 100,
                child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
              );
            },
          ),
          title: Text('视频 ${index + 1}'),
          subtitle: Text(videoPath.split('/').last),
        );
      },
    );
  }
}

额外提示 #

• 临时目录的缩略图可定期清理，避免占用多余存储
• 若无需保存文件，可改用 VideoThumbnail.thumbnailData() 获取字节流，通过 Image.memory() 展示
• 注意处理视频路径无效、权限被拒绝等异常场景

内容的提问来源于stack exchange，提问作者Faizan Abbas Bangash