how to create a thumbnail of a vedio after getting vedio file path in flutter

Question

I want to show the thumbnail of the video in lisviewbuilder here is the path of a video after getting from device storage.

files[index]

Answer 1

You can use the video_thumbnail package to generate a thumbnail for your video file, and it's implementation would be like this :

 final uint8list = await VideoThumbnail.thumbnailData(
  video: files[index}, // video path
  imageFormat: ImageFormat.JPEG,
  maxWidth: 128, // specify the width of the thumbnail, let the height auto-scaled to keep the source aspect ratio
  quality: 25,
);

you can try implementing it like this, first add this method in your class:

Future<Uint8List?> _thumbnailImage(path) async {
  return await VideoThumbnail.thumbnailData(
    video: path, // video path
    imageFormat: ImageFormat.JPEG,
    maxWidth:
        128, // specify the width of the thumbnail, let the height auto-scaled to keep the source aspect ratio
    quality: 25,
  );
}

then use this FutureBuilder to show it:

 FutureBuilder<Uint8List?>(
          future: _thumbnailImage(files[index]),
          builder: (_, AsyncSnapshot<Uint8List?> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            }
            if (snapshot.hasData) {
              return Image.memory(snapshot.data!);
            }
            return Text("error");
          },
        ),

You can also use it with combination with the image_picker, to get the video path from the device like this:

  final XFile? image =
  await ImagePicker().pickVideo(source: ImageSource.gallery);
  final String pathToUse = image!.path;

then use that path in the _thumbnailImage() method.