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.

• 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`
  

• 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:

• 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

1. Instance editorSDK is null if the license token is incorrect. In this case you cannot use photo editor. Check your license token.
2. 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

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

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.