How to Add a Video Creation and Editing Feature to Your Flutter App
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
isnull
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:
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.
Book a Discovery Call.