Azul Video Editor

A Flutter package for seamless video editing with powerful trimming capabilities. Azul Video Editor provides an intuitive interface for trimming videos, previewing edits in real-time, and customizing the editing experience.

Features

• Video Trimming: Easily trim videos to your desired length.
• Auto File Picking: Automatically open a file picker to select videos.
• Real-Time Preview: Preview edits instantly as you adjust the timeline.
• Timeline with Thumbnails: Navigate videos with a thumbnail-based timeline.
• Customizable UI: Tailor colors, text, and aspect ratios to match your app.
• Easy Integration: Simple API for quick setup in any Flutter project.

Screenshots

Installation

Add the package to your project by including it in your pubspec.yaml:

dependencies:
  azul_video_editor: ^0.0.1

Run the following command to fetch the package:

flutter pub get

Platform-Specific Setup

Android

Add the following permissions to your AndroidManifest.xml (located in android/app/src/main/AndroidManifest.xml):

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

For Android 13 (API 33) and above, you may need to use granular media permissions:

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

Note: If targeting Android 11 (API 30) or higher, ensure your app handles scoped storage requirements. You may need to add requestLegacyExternalStorage="true" in the <application> tag for older apps:

<application
    android:requestLegacyExternalStorage="true"
    ... >

Update your android/app/build.gradle to set the minimum SDK version to at least 21:

android {
    defaultConfig {
        minSdkVersion 21
    }
}

iOS

Azul Video Editor requires iOS 13.0 or later. Add the following keys to your Info.plist (located in ios/Runner/Info.plist):

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library for video editing.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app requires access to the photo library to save edited videos.</string>

Ensure your Podfile (in ios/Podfile) specifies at least iOS 13.0:

platform :ios, '13.0'

Run pod install in the ios/ directory to update dependencies:

cd ios && pod install

Usage

Azul Video Editor offers a flexible API for integrating video editing into your Flutter app. Below are examples of common use cases.

Basic Usage (Auto Pick Video)

Open the editor with a single line of code. The file picker opens automatically, and the result is the path to the edited video:

import 'package:flutter/material.dart';
import 'package:azul_video_editor/azul_video_editor.dart';

void openEditor(BuildContext context) async {
  // Open the editor and get the result
  final String? result = await AzulVideoEditor.openEditor(context);

  if (result != null) {
    print('Edited video path: $result');
  }
}

Manual Video Selection

Disable auto-pick to show a video selection button:

final String? result = await AzulVideoEditor.openEditor(
  context,
  autoPickVideo: false,
);

if (result != null) {
  print('Edited video path: $result');
}

With Customization

Customize the editor’s appearance and behavior using AzulEditorOptions:

final options = AzulEditorOptions(
  maxDurationMs: 30000, // 30 seconds max duration
  title: 'My Video Editor',
  primaryColor: Colors.purple,
  backgroundColor: Colors.black,
  videoBackgroundColor: Colors.grey[900]!,
  saveButtonText: 'Export Video',
  thumbnailSize: 30,
  aspectRatio: 16 / 9, // Force 16:9 aspect ratio
  showDuration: true,
  videoMargin: 20.0,
  videoRadius: 10.0,
  slideAreaColor: Colors.yellow,
);

final String? result = await AzulVideoEditor.openEditor(
  context,
  options: options,
);

if (result != null) {
  print('Edited video path: $result');
}

With an Initial Video File

If you already have a video file, pass it directly to the editor:

import 'dart:io';

File videoFile = File('/path/to/video.mp4');

final String? result = await AzulVideoEditor.openEditor(
  context,
  initialVideoFile: videoFile,
);

if (result != null) {
  print('Edited video path: $result');
}

Advanced Usage (Widget Integration)

For full control, embed the AzulVideoEditor widget in your navigation stack:

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => AzulVideoEditor(
      options: AzulEditorOptions(
        maxDurationMs: 10000,
        title: 'Custom Editor',
        primaryColor: Colors.blue,
        showDuration: true,
        videoMargin: 16.0,
        videoRadius: 12.0,
        slideAreaColor: Colors.yellow,
      ),
      onVideoSaved: (path) {
        print('Video saved to: $path');
      },
      autoPickVideo: true,
    ),
  ),
);

Configuration Options

Customize the editor with AzulEditorOptions:

Example

Check the example/ folder for a sample Flutter app demonstrating how to integrate Azul Video Editor. To run the example:

cd example
flutter run

Contributing

Contributions are welcome! Please submit issues or pull requests to the GitHub repository.

License

This package is licensed under the MIT License.

📧 Author

Created by Mouad Zizi.

⭐ Show Your Support

If you find Azul Video Editor helpful, please give it a ⭐ on GitHub! Your support helps others discover the package and encourages ongoing development.

Acknowledgments

A special thanks to the creator of easy_video_editor for their foundational work. Azul Video Editor was built upon the inspiration and capabilities of this package, and it wouldn't have been possible without it!