video_editor 2.1.0 icon indicating copy to clipboard operation
video_editor: ^2.1.0 copied to clipboard

A flutter package for editing video written in pure Dart with fully customizable UI. Supports crop, trim, rotation and cover selection.

Flutter video editor #

Pub ffmpeg_kit_flutter GitHub stars

A video editor that allows to edit (trim, crop, rotate and scale) and choose a cover with a very flexible UI design.

The exportation is made using ffmpeg_kit_flutter library.

This library is written in Dart only but uses external packages such as ffmpeg_kit_flutter and video_thumbnail, which makes it available only on iOS and Android plaforms for now.

📖 Installation #

Following steps will help you add this library as a dependency in your flutter project.

  • Run flutter pub add video_editor, or add video_editor to pubspec.yaml file manually.
dependencies:
  video_editor: ^2.1.0
  • Import the package in your code:
import 'package:video_editor/video_editor.dart';

Since v1.3.0, video_editor uses ffmpeg_kit_flutter main release which supports the latest features. (More info on flutter FFmepeg kit)

Those Android API level and iOS deployment target are required to uses this package. If you're planing to target older devices, check about the LTS release.

Android
API Level
iOS Minimum
Deployment Target
24 12.1

📸 Screenshots #

(The UI Design is fully customizable on the example)

Example app running on an Iphone 11 proCustomization example, light mode

👀 Usage #

VideoEditorController #

FunctionDescription
initialize(aspectRatio)Init the controller parameters, the video, the trim and the cover, call cropAspectRatio
rotate90Degrees(RotateDirection)Rotate the video by 90 degrees in the direction provided
preferredCropAspectRatioUpdate the aspect ratio of the crop area
setPreferredRatioFromCropUpdate the aspect ratio to the current crop area ratio
cropAspectRatioUpdate the aspect ratio + update the crop area to the center of the video size
updateCropUpdate the controller crop min and max values
updateTrimUpdate the controller trim min and max values
getMetaData(onCompleted)Return the metadata of the video file in onCompleted function
exportVideo(onCompleted)Return the generated video with the controller parameters in onCompleted function
extractCover(onCompleted)Return the selected cover with the controller parameters in onCompleted function
GetterDescription
Duration startTrimThe start value of the trimmed area
Duration endTrimThe end value of the trimmed area
Duration trimmedDurationThe duration of the selected trimmed area
bool isTrimmedSet to true when the trimmed values are not the default video duration
bool isTrimmingSet to true when startTrim or endTrim is changing
Duration maxDurationThe maxDuration possible for the trimmed area
Duration minDurationThe minDuration possible for the trimmed area
Offset minCropThe top left position of the crop area (between 0.0 and 1.0)
Offset maxCropThe bottom right position of the crop area (between 0.0 and 1.0)
Size croppedAreaThe actual Size of the crop area
double? preferredCropAspectRatioThe preferred crop aspect ratio selected
bool isRotatedSet to true when the rotation is different to 0
int rotationThe rotation angle set 0, 90, 180 and 270
int cacheRotationThe sum of all the rotation applied in the editor
CoverData? selectedCoverValThe selected cover thumbnail that will be used to export the final cover

Widgets #

Click to expand widgets documentation

Crop

1. CropGridViewer

This widget is used to enable the crop actions on top of the video (CropGridViewer.edit), or only to preview the cropped result (CropGridViewer.preview).

ParamDescription
required VideoEditorController controllerThe controller param is mandatory so every change in the controller settings will propagate in the crop view
EdgeInsets marginThe amount of space by which to inset the crop view, not used in preview mode

Trimmer

1. TrimSlider

Display the trimmer containing video thumbnails with rotation and crop parameters.

ParamDescription
required VideoEditorController controllerThe controller param is mandatory so every change in the controller settings will propagate in the trim slider view
double height = 0.0The height param specifies the height of the generated thumbnails
double quality = 10The quality param specifies the quality of the generated thumbnails, from 0 to 100 (more info)
double horizontalMargin = 0.0The horizontalMargin param specifies the horizontal space to set around the slider. It is important when the trim can be dragged (controller.maxDuration < controller.videoDuration)
Widget? childThe child param can be specify to display a widget below this one (e.g: TrimTimeline)
bool hasHaptic = trueThe hasHaptic param specifies if haptic feed back can be triggered when the trim touch an edge (left or right)
double maxViewportRatioo = 2.5The maxViewportRatio param specifies the upper limit of the view ratio
2. TrimTimeline

Display the video timeline.

ParamDescription
required VideoEditorController controllerThe controller param is mandatory so depending on the controller.maxDuration, the generated timeline will be different
double quantity = 8Expected quantity of elements shown in the timeline
EdgeInsets padding = EdgeInsets.zeroThe padding param specifies the space surrounding the timeline
String localSeconds = 's'The String to represents the seconds to show next to each timeline element
TextStyle? textStyleThe TextStyle to use to style the timeline text

Cover

1. CoverSelection

Display a couple of generated covers with rotation and crop parameters to updated the selected cover.

ParamDescription
required VideoEditorController controllerThe controller param is mandatory so every change in the controller settings will propagate in the cover selection view
double size = 0.0The size param specifies the max size of the generated thumbnails
double quality = 10The quality param specifies the quality of the generated thumbnails, from 0 to 100 (more info)
double horizontalMargin = 0.0The horizontalMargin param need to be specify when there is a margin outside the crop view, so in case of a change the new layout can be computed properly.
int quantity = 5The quantity param specifies the quantity of thumbnails to generate
Wrap? wrapThe wrap widget to use to customize the thumbnails wrapper
Function? selectedCoverBuilderTo returns how the selected cover should be displayed
2. CoverViewer

Display the selected cover with rotation and crop parameters.

ParamDescription
required VideoEditorController controllerThe controller param is mandatory so every change in the controller settings will propagate the crop parameters in the cover view
String noCoverText = 'No selection'The noCoverText param specifies the text to display when selectedCover is null

Style #

Click to expand style documentation

1. CropStyle

You can create your own CropStyle class to customize the CropGridViewer appareance.

ParamDescription
Color croppingBackground = Colors.black.withOpacity(0.48)The croppingBackground param specifies the color of the paint area outside the crop area when copping
Color background = Colors.blackThe background param specifies the color of the paint area outside the crop area when not copping
double gridLineWidth = 1The gridLineWidth param specifies the width of the crop lines
Color gridLineColor = Colors.whiteThe gridLineColor param specifies the color of the crop lines
int gridSize = 3The gridSize param specifies the quantity of columns and rows in the crop view
Color boundariesColor = Colors.whiteThe boundariesColor param specifies the color of the crop area's corner
Color selectedBoundariesColor = kDefaultSelectedColorThe selectedBoundariesColor param specifies the color of the selected crop area's corner
double boundariesLength = 20The boundariesLength param specifies the length of the crop area's corner
double boundariesWidth = 5The boundariesWidth param specifies the width of the crop area's corner

2. TrimStyle

You can create your own TrimStyle class to customize the TrimSlider appareance.

ParamDescription
Color background = Colors.black.withOpacity(0.6)The background param specifies the color of the paint area outside the trimmed area
Color positionLineColor = Colors.redThe positionLineColor param specifies the color of the line showing the video position
double positionLineWidth = 2The positionLineWidth param specifies the width of the line showing the video position
Color lineColor = Colors.whiteThe lineColor param specifies the color of the borders around the trimmed area
Color onTrimmingColor = kDefaultSelectedColorThe onTrimmingColor param specifies the color of the borders around the trimmed area while it is getting trimmed
Color onTrimmedColor = kDefaultSelectedColorThe onTrimmedColor param specifies the color of the borders around the trimmed area when the trimmed parameters are not default values
double lineWidth = 2The lineWidth param specifies the width of the borders around the trimmed area
TrimSliderEdgesType borderRadius = 5The borderRadius param specifies the border radius around the trimmer
double edgesType = TrimSliderEdgesType.barThe edgesType param specifies the style to apply to the edges (left & right) of the trimmer
double edgesSizeThe edgesSize param specifies the size of the edges behind the icons
Color iconColor = Colors.blackThe iconColor param specifies the color of the icons on the trimmed area's edges
double iconSize = 25The iconSize param specifies the size of the icon on the trimmed area's edges
IconData? leftIcon = Icons.arrow_leftThe leftIcon param specifies the icon to show on the left edge of the trimmed area
IconData? rightIcon = Icons.arrow_rightThe rightIcon param specifies the icon to show on the right edge of the trimmed area

3. CoverStyle

You can create your own CoverStyle class to customize the CoverSelection appareance.

ParamDescription
Color selectedBorderColor = Colors.whiteThe selectedBorderColor param specifies the color of the border around the selected cover thumbnail
double borderWidth = 2The borderWidth param specifies the width of the border around each cover thumbnails
double borderRadius = 5.0The borderRadius param specifies the border radius of each cover thumbnail

💭 FAQ #

1. How to use FFmpeg LTS release #

Since v1.3.0, video_editor uses ffmpeg_kit_flutter main release which supports the latest features. If you want to support a wider range of devices you should use the LTS release. more info

To do this, add this to your pubspec.yaml:

dependency_overrides:
  ffmpeg_kit_flutter_min_gpl: ^5.1.0-LTS

On Android, if it gives a minSdkVersion error, try adding the following in /android/app/src/main/AndroidManifest.xml.

<manifest xmlns:android=... package=... xmlns:tools="http://schemas.android.com/tools" >
  <uses-sdk tools:overrideLibrary="com.arthenica.ffmpegkit.flutter"/>
</manifest>

✨ Credit #

Many thanks to seel-channel who is the original creator of this library.

257
likes
140
pub points
95%
popularity

Publisher

verified publisher iconfelipemurguia.com

A flutter package for editing video written in pure Dart with fully customizable UI. Supports crop, trim, rotation and cover selection.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

ffmpeg_kit_flutter_min_gpl, flutter, path, path_provider, transparent_image, video_player, video_thumbnail

More

Packages that depend on video_editor