Jul 11, 2024

How to Add a Video Creation and Editing Feature to Your Flutter App

Unlock the power of video creation in your Flutter app! Dive into our article to learn how the Banuba SDK can transform your app into a one-stop video creation studio.

Flutter

Technology

Trends

App Development

Author

Vikrant SinghSoftware Engineer III

How to Add a Video Creation and Editing Feature to Your Flutter App

Book a call

Table of Contents

In today's world, where short-form video content reigns supreme and user-generated creations are king, equipping your Flutter app with video creation and editing features is no longer a fad - it's a strategic move. Imagine empowering your users to become instant video makers within your app. This article dives into the exciting realm of video creator/editor functionalities in Flutter using the Banuba SDK. Get ready to explore how you can transform your app into a one-stop video creation studio, boosting user engagement and unleashing a wave of creative expression.

Adding Banuba's cutting-edge video creation and video editing capabilities to your Flutter projects is easier than you think! While there's no dedicated Flutter SDK, this blog breaks down the integration process for iOS and Android, making it a breeze to add exciting video functionalities to your apps.

Installation

Android
GitHub Packages is used for downloading Android Video Editor SDK modules.
First, add repositories to gradle file in allprojects section.

Next, specify a list of dependencies in gradle file.

Additionally, make sure the following plugins are in your app gradle and at the top of the file.

plugins { 
    id "com.android.application"     id "kotlin-android"     id "dev.flutter.flutter-gradle-plugin"     id "kotlin-parcelize" 
}

iOS

Add iOS Video Editor SDK dependencies to your Podfile

`sdk_version = '1.36.0'

pod 'BanubaARCloudSDK', sdk_version #optional
pod 'BanubaVideoEditorSDK', sdk_version
pod 'BanubaAudioBrowserSDK', sdk_version #optional
pod 'BanubaSDK', sdk_version #optional
pod 'BanubaSDKSimple', sdk_version
pod 'BanubaSDKServicing', sdk_version
pod 'VideoEditor', sdk_version
pod 'BanubaUtilities', sdk_version
pod 'BanubaVideoEditorGallerySDK', sdk_version #optional
pod 'BanubaLicenseServicingSDK', sdk_version

pod 'BNBLicenseUtils', sdk_version

pod 'VEExportSDK', sdk_version
pod 'VEEffectsSDK', sdk_version
pod 'VEPlaybackSDK', sdk_version`

Configuration

Android
Next, specify VideoCreationActivity in your AndroidManifest.xml. This Activity combines a number of screens into video editor flow.

Next, allow Network by adding permissions:

and android:usesCleartextTraffic="true" in AndroidManifest.xml.

Please set up correctly network security config and use of android:usesCleartextTraffic by following guide.

Create new Kotlin class VideoEditorModule.kt in your project for initializing and customizing Video Editor SDK features:

iOS
Create new Swift class VideoEditorModule.swift in your project for initializing and customizing Video Editor SDK features:

Launch

Android
Flutter platform channels approach is used for communication between Flutter and Android.
Set up channel message handler in your MainActivity to listen to calls from Flutter.

Send initVideoEditor message from Flutter to Android:

and add corresponding handler on Android side to initialize Video Editor.

Finally, once the SDK in initialized you can send startVideoEditor message from Flutter to Android:

and add the corresponding handler on Android side to start Video Editor.

❗ Important

Instance editorSDK is null if the license token is incorrect. In this case you cannot use photo editor. Check your license token.
It is highly recommended to check if the license is active before starting Photo Editor.

iOS
Flutter platform channels approach is used for communication between Flutter and iOS.
Set up channel message handler in your AppDelegate.swift to listen to calls from Flutter.

Send initVideoEditor message from Flutter to iOS:

and add corresponding handler on iOS side to initialize Video Editor.

Initialize Video Editor SDK using license token in VideoEditorModule on iOS.

Finally, once the SDK in initialized you can send startVideoEditor message from Flutter to iOS:

and add the corresponding handler on iOS side to start Video Editor.

❗ Important

Instance videoEditor is nil if the license token is incorrect. In this case you cannot use photo editor. Check your license token.
It is highly recommended to check if the license if active before starting Photo Editor.

Conclusion

This comprehensive blog unveils the power of Banuba SDK to bring cutting-edge video creation and editing features to your Flutter apps. You’ve learnt how to integratre it on both iOS and Android platforms, even without a dedicated Flutter SDK. Follow step-by-step instructions on installation, configuration, and launch, complete with code snippets and explanations. Empower your users to become video creators within your app and unlock a new dimension of user engagement and creative expression.

SHARE ON