Mobile Development 18 min read

Boosting Audio‑Video Editing with Flutter: Kuaishou’s Cross‑Platform Success

This article details how Kuaishou’s Fast Creation team leveraged pure Flutter to implement complex audio‑video features such as playback, editing, and live streaming, describing the challenges of UI, state, performance, and data communication, and presenting optimization techniques like external textures, FFI, thumbnail caching, and frame‑rate improvements.

Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Boosting Audio‑Video Editing with Flutter: Kuaishou’s Cross‑Platform Success

Audio‑Video Practice

Kuaishou Fast Creation supports many audio‑video functions including video playback, live streaming, template videos, and video editing, with the editing module being the most complex due to numerous features, states, and logic.

Feature complexity : import/export, cut, delete, speed change, copy, reorder, music, subtitles, filters, multi‑track, undo, drafts, etc.

State complexity : many intermediate states during user interactions.

Technical complexity : multiple technology domains requiring cross‑team collaboration.

Logic complexity : speed‑change logic significantly increases difficulty.

UI complexity : intricate timelines for video, audio, and effects.

High performance demand : frequent data communication and video preview affect performance.

After evaluating native versus pure Flutter development, the team chose pure Flutter for its ability to share a single codebase across platforms, improve development efficiency, and maintain UI consistency.

In two months and four releases, the team delivered mainstream video‑editing features on both Android and iOS, achieving roughly double the development speed compared to native.

External Texture Solution

For video playback and preview, an external‑texture approach is used. The process involves three steps:

Flutter notifies native to create a texture and returns a TextureId.

Flutter declares a Texture widget and binds the native texture via the TextureId.

The native side maps texture data to the TextureLayer, which the Flutter engine composites.

On Android, the native texture is a SurfaceTexture; on iOS it is a FlutterTexture. Both rely on EGLImageKHR for shared memory texture sharing.

Data Communication

Complex UI and state are managed with Redux. Initial implementations used channel‑based communication for each feature, which proved costly. The new approach assembles the entire VideoEditorProject on the Flutter side and sends it to the native SDK via a single channel, reducing native involvement.

Binary data is serialized with Protocol Buffers (PB) to ensure model consistency across Flutter, Android, iOS, and the audio‑video SDK.

FFI Integration

Using dart:ffi and ffigen , the team bypassed the channel layer, allowing direct calls from Dart to the C/C++ audio‑video SDK. This reduces latency and improves performance, especially for thumbnail retrieval.

<code>/**
 * Posts a message on some port. The message will contain the Dart_CObject
 * object graph rooted in 'message'.
 */
DART_EXPORT bool Dart_PostCObject(Dart_Port port_id, Dart_CObject* message);
/**
 * Creates a new native port.
 */
DART_EXPORT Dart_Port Dart_NewNativePort(const char* name,
                                         Dart_NativeMessageHandler handler,
                                         bool handle_concurrently);
DART_EXPORT bool Dart_CloseNativePort(Dart_Port native_port_id);
</code>

FFI‑based thumbnail fetching improved loading speed by 2‑16% in high‑load scenarios.

Thumbnail and Frame‑Rate Optimizations

Switching to FFI and an external‑texture thumbnail solution raised iOS preview frame rates from ~50 fps to ~58 fps and Android to ~45 fps. Additional UI‑thread and Raster‑thread optimizations include avoiding heavy work in build methods, limiting Redux refresh scope, using RepaintBoundary , and reducing off‑screen rendering.

R&D Support Tools

The team built internal tools such as Keep for CI/CD, Pub private registry, fvm for Flutter version management, memory leak detection, APM and crash monitoring, and the open‑source KDebugTools suite for device inspection, network interception, widget inspection, and remote debugging.

Conclusion

Flutter proved capable of handling complex audio‑video features with development efficiency roughly twice that of native, while achieving acceptable performance. Although some limitations remain, Flutter is suitable for new medium‑scale projects requiring rapid iteration.

Fluttermobile developmentCross-Platformperformance optimizationFFIAudio-Video
Kuaishou Frontend Engineering
Written by

Kuaishou Frontend Engineering

Explore the cutting‑edge tech behind Kuaishou's front‑end ecosystem

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.