How to Use the Flutter Video Trimmer for Video Editing in Your App

In mobile app development, video editing features have become increasingly popular due to the wide popularity of content creation. Whether for social media apps, video-sharing platforms, or personal projects, trimming and editing videos is a powerful tool. Flutter, a versatile framework for building beautiful UIs, offers a package that makes video trimming straightforward and efficient: the Flutter Video Trimmer package.

The Flutter Video Trimmer package is a comprehensive solution for integrating video trimming functionality into your Flutter app. It allows you to load video files, display a preview, and trim videos according to your needs. This package leverages the power of FFmpeg, a renowned multimedia framework capable of handling various video, audio, and other multimedia files and streams.

In this blog post, we will explore using the Flutter Video Trimmer package to add video trimming and editing capabilities to your Flutter app. We'll walk through setting up a new Flutter project, loading and previewing video files, trimming and editing videos, and saving and exporting the edited video.

Setting Up the Flutter Environment

Before diving into the video editing capabilities of the Flutter video trimmer package, we need to set up a new Flutter project and install the necessary Dart packages.

Creating a New Flutter Project

To create a new Flutter project, you need to run the flutter create command in your terminal. This command will generate a new Flutter project with a simple main.dart file. The main.dart file is where you'll write your Flutter app's code.

Here’s an example of main.dart file:

1void main() {
2  runApp(const MyApp());
3}
4
5class MyApp extends StatelessWidget {
6  const MyApp({Key? key}) : super(key: key);
7
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      home: Scaffold(
12        appBar: AppBar(
13          title: const Text('Flutter Video Trimmer Example'),
14        ),
15        body: const Center(
16          child: Text('Hello, Flutter!'),
17        ),
18      ),
19    );
20  }
21}
22

In this main.dart file, we have a MyApp class that extends StatelessWidget. This class overrides the build method, which describes the part of the user interface the widget represents.

Installing Necessary Dart Packages

You must install the necessary Dart packages after creating your new Flutter project. For this project, you'll need the video_trimmer package. You can add this package to your project by adding it to your pubspec.yaml file and running the flutter pub get command.

1dependencies:
2  flutter:
3    sdk: flutter
4
5  video_trimmer: ^3.0.1
6

Loading and Previewing Video Files

Once the Flutter environment is set up and the necessary packages are installed, the next step is to load video files into your Flutter app and display a video preview.

Methods to Load Video Files into Your Flutter App

You can use the loadVideo method from the video_trimmer package to load video files into your Flutter app. This method takes a videoFile argument, the video file you want to load.

1final Trimmer _trimmer = Trimmer();
2await _trimmer.loadVideo(videoFile: file);
3

In this code snippet, we first create an instance of the Trimmer class. Then, we call the loadVideo method on this instance and pass the video file we want to load. This method is asynchronous, so we use the await keyword to wait for the method to complete before moving on.

Remember, the file in videoFile: file is the video file you want to load. You can obtain this file using a file picker or any other method depending on your app's requirements.

Displaying Video Preview in Flutter Application

After loading the video file, you should display a preview in your Flutter application. You can do this using the VideoViewer widget from the video_trimmer package.

1VideoViewer(trimmer: _trimmer)
2

In this code snippet, we create a VideoViewer widget and pass the Trimmer instance to it. This widget will preview the video file loaded into the Trimmer instance.

Video Trimming and Editing with Flutter Video Trimmer

Now that we have loaded our video file and displayed a preview in our Flutter app, let's dive into the core functionality of the video_trimmer package: video trimming and editing.

4.1 Understanding FFmpeg Command in Video Trimming

The video_trimmer package uses FFmpeg, a powerful tool to read, write, and convert various video files. The package uses FFmpeg commands to perform video trimming and editing.

An FFmpeg command is a string that specifies what operation to perform on a video file. For example, to trim a video, you might use an FFmpeg command like -ss 00:00:30 -t 00:01:00, which tells FFmpeg to start at 30 seconds into the video and end at 1 minute.

In the video_trimmer package, you can use the saveTrimmedVideo method to trim a video. This method takes startValue and endValue arguments, which specify the start and end times for the trimmed video.

1await _trimmer
2    .saveTrimmedVideo(startValue: _startValue, endValue: _endValue)
3    .then((value) {
4  setState(() {
5    _value = value;
6  });
7});
8

In this code snippet, we call saveTrimmedVideo on our Trimmer instance and pass the start and end times. This method is asynchronous, so we use await to wait for it to complete.

Implementing Video Trimming and Editing in Dart Code

To implement video trimming and editing in your Flutter app, you can use the TrimEditor widget from the video_trimmer package.

1TrimEditor(
2  trimmer: _trimmer,
3  viewerHeight: 50.0,
4  viewerWidth: MediaQuery.of(context).size.width,
5  maxVideoLength: Duration(seconds: 10),
6  onChangeStart: (value) => _startValue = value,
7  onChangeEnd: (value) => _endValue = value,
8  onChangePlaybackState: (value) => setState(() => _isPlaying = value),
9)
10

In this code snippet, we create a TrimEditor widget and pass our Trimmer instance to it. We also specify the viewer's height and width, the video's maximum length, and callbacks for when the start and end times and the playback state change.

Managing Video Playback State during Trimming

While trimming the video, you should control the video's playback state. You can do this using the videoPlaybackControl method from the video_trimmer package.

1await _trimmer.videoPlaybackControl(
2  startValue: _startValue,
3  endValue: _endValue,
4);
5

In this code snippet, we call videoPlaybackControl on our Trimmer instance and pass the start and end times. This method is asynchronous, so we use await to wait for it to complete.

Saving and Exporting the Edited Video

After trimming and editing the video to your liking, the next step is to save and export the edited video.

Defining the Output Path for the Edited Video

The video_trimmer package automatically handles the output path for the edited video. When you call the saveTrimmedVideo method, it saves the edited video to a temporary directory and returns the path to the edited video file.

1String? outputVideoPath;
2await _trimmer
3    .saveTrimmedVideo(startValue: _startValue, endValue: _endValue)
4    .then((value) {
5  outputVideoPath = value;
6});
7

In this code snippet, we call saveTrimmedVideo on our Trimmer instance and store the returned path in outputVideoPath. This path points to the location of the edited video file in the temporary directory.

Handling Errors during Video File Export

While exporting the video file, you might encounter errors. Handling these errors is essential to prevent your Flutter app from crashing.

You can handle errors by wrapping the saveTrimmedVideo call in a try-catch block. If an error occurs during the video export, the catch block will be executed, allowing you to handle the error gracefully.

1try {
2  await _trimmer
3      .saveTrimmedVideo(startValue: _startValue, endValue: _endValue)
4      .then((value) {
5    outputVideoPath = value;
6  });
7} catch (e) {
8  print('Failed to export video: $e');
9}
10

In this code snippet, we print an error message to the console if an error occurs during the video export.

Conclusion

Incorporating video trimming and editing features into your Flutter app can significantly enhance its functionality and user experience. The Flutter Video Trimmer package simplifies this process, providing a robust and efficient solution for handling video files. From setting up your Flutter environment to saving and exporting the edited video, each step is designed to be straightforward and manageable. With this guide, you're now equipped with the knowledge to implement video trimming in your Flutter app.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.