Create thumbnails from videos — Flutter

Farrukh Sajjad
2 min readMar 25, 2021

Yet another 2 inglorious days where I had to create thumbnails from videos from local storage and send it to the internet at work. And a moment to quitting work as well, I came across this flutter plugin “thumbnails” which saved the day.
😉

generate thumbnails from your videos flutter

Here’s how you can create thumbnails from your own videos:

  1. Install this thumbnails plugin (thumbnails: ^1.0.1)
  2. Import it (duhhh)…
  3. You’re going to need image_picker as well to pick videos or images from your gallery or camera.

STEP1:

Create two variables, picker and _video of type ImagePicker() and File, respectively in your state.

final picker = ImagePicker();File _video;

STEP2:

Create an asynchronous function getVideo() and use the ImagePicker variable to get the video from gallery or from camera and set the value of picked file to the File variable i.e., _video

getVideo()async
{
var file = await await picker.getVideo(source: ImageSource.gallery);
if (file != null) {
setState(() {_video = File(file.path);});|}

STEP3:

After getting your required video its time to generate its thumbnail. We will be doing that inside the getVideo() method as well.

getVideo() async {var file = await picker.getVideo(source: ImageSource.gallery);if (file != null) {setState(() {_video = File(file.path);});String thumb = await Thumbnails.getThumbnail(videoFile: _video.path,quality: 10,imageType: ThumbFormat.PNG,);setState(() {thumbnail = thumb;});}}

Your thumbnail is store in the thumbnail variable of type string which you have to declare in state.

LAST STEP:

Down in the build widget method now you can display the thumbnail inside a widget.

child: Container(child: _video != null ? Image.file(File(thumbnail)) : Text("data"),),

Taa daa

Here’s the complete code:

import 'dart:io';import 'package:flutter/material.dart';import 'package:image_picker/image_picker.dart';import 'package:thumbnails/thumbnails.dart';class Thumbnail extends StatefulWidget {@override_ThumbnailState createState() => _ThumbnailState();}class _ThumbnailState extends State<Thumbnail> {final picker = ImagePicker();File _video;String thumbnail;getVideo() async {var file = await picker.getVideo(source: ImageSource.gallery);if (file != null) {setState(() {_video = File(file.path);});String thumb = await Thumbnails.getThumbnail(videoFile: _video.path,quality: 10,imageType: ThumbFormat.PNG,);setState(() {thumbnail = thumb;});}}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Container(child: _video != null ? Image.file(File(thumbnail)) : Text("data"),),),floatingActionButton: FloatingActionButton(child: Icon(Icons.add,),onPressed: () {getVideo();},),);}}

Mandatory Image:

--

--