Inside Kuaishou Creative: Flutter Architecture, State Management & Communication Strategies

Background Introduction

Flutter, as a new‑generation self‑rendering cross‑platform engine, has gained widespread adoption due to continuous version upgrades that address performance and usability issues, quickly reaching the 2.0 era.

Kuaishou Creative is a product built around commercial advertising creativity, targeting suppliers, agencies, advertisers, merchants, and video industry professionals. Its goal is to provide intelligent material production capabilities, lowering the creative production threshold, improving ad quality, and increasing material consumption. Core functions include video creation, creative inspiration, creative academy, and data analysis.

Overall Architecture

Kuaishou Creative is a pure Flutter project using a componentized layered architecture. The lowest layer is the platform embedding layer (Android and iOS). Above that is the communication layer, which provides communication between the platform layer and the Flutter app, using Platform Channels, external textures, and high‑performance Dart FFI for image processing and video editing.

The top layer is the app project, with a business layer in the middle (currently not extracted into an independent library). The foundation component layer encapsulates common libraries, exposed via Pub dependencies to reduce coupling and lower development costs for other Flutter projects.

More than 10 generic components have been consolidated, with four published to the mobile developer center. Apart from audio‑video modules that require native involvement, most business logic (over 90% of the code) is implemented purely in Flutter, ensuring UI, functionality, and logic consistency across platforms.

State Management

Flutter’s declarative UI requires managing app state to render views. Two types of state are distinguished: page‑internal state and cross‑page shared state.

For page‑internal state, Kuaishou Creative adopts the BLoC pattern, which defines data flow, separates business logic from UI, and uses Streams to trigger state changes. BLoC can be combined with RxDart for richer capabilities, though it may be heavyweight for simple pages, where lighter solutions like ValueNotifier are preferable.

For cross‑page shared state, simple scenarios use InheritedWidget or Provider, but complex cases such as video editing require a more robust solution. The team therefore uses Redux, a front‑end state‑management framework with three core principles: a single source of truth (Store), immutable state, and pure‑function reducers triggered by actions. Redux decouples business modules, separates logic from view, and ensures a unidirectional data flow, improving development efficiency and architectural clarity.

Challenges with Flutter‑Redux include the need for strongly typed state (unlike JavaScript’s dynamic objects) and verbose copy‑with logic for immutable updates. Solutions include manually writing copyWith methods, using code‑generation tools like quicktype, or leveraging Built_value to generate Rebuild methods and bind actions, reducers, and middleware automatically.

Communication

Communication comprises data communication and page navigation.

Data communication between Flutter and native layers traditionally uses Platform Channels, which suffer from scattered registration, hard‑coded templates, unsafe data types, and limited serialization (JSON). Kuaishou Creative addresses these issues with a centralized registration and dispatch mechanism, similar to a JSBridge in WebView.

For more demanding scenarios, the team implements a generic Bridge based on gRPC and Protocol Buffers (ProtoBuf). ProtoBuf provides binary serialization with better performance than JSON and defines a unified IDL for generating type‑safe code across Dart, Java, and Objective‑C. gRPC offers a high‑performance RPC framework with C/S architecture, enabling full‑duplex communication (GrpcX) that supports synchronous calls with asynchronous responses and allows native code to invoke Flutter methods.

Data flow diagrams illustrate the centralized management, error handling, and logging capabilities of this approach.

Page Navigation

Flutter’s built‑in Navigator has limitations for the pure‑Flutter app. Kuaishou Creative therefore implements a URL‑based routing library called KRoute, inspired by native routing. KRoute uses compile‑time annotations and Build_runner to generate routing tables and interceptors, ensuring type‑safe parameters, unified transition animations, page aliases, and interceptor methods. It also supports HTTP(S) schemas and fallback H5 navigation.

Conclusion

The article summarizes the first part of the Flutter series, presenting Kuaishou Creative’s cross‑platform implementation, challenges, and solutions in architecture, state management, and communication. It emphasizes the importance of fine‑grained view splitting to minimize rebuilds and improve performance.

Future articles will delve into audio‑video practices and further optimization techniques.