Flutter Adoption and Hybrid Integration in Xianyu: Architecture, Performance, and Lessons

Flutter is a cross‑platform mobile UI framework built with the Dart language. Xianyu’s technical team applied Flutter to the most complex and critical product detail page to validate its performance and feasibility.

Flutter Features

Flutter uses a custom rendering engine, enabling high‑performance, high‑fidelity UI on both Android and iOS. It differs from other mobile solutions (iOS, Android, Weex, RN, Kotlin, H5) by compiling Dart directly to native code.

Language Choice

Dart was selected after evaluating more than ten popular languages because it combines the strengths of many languages and aligns well with Flutter’s UI construction model.

Flutter vs ReactNative

ReactNative relies on JavaScript, a bridge, and dynamic updates, which increase cost and introduce performance overhead. Flutter uses Dart, compiles to native code, provides its own UI components and renderer, and avoids bridge overhead.

ReactNative: JavaScript, bridge, dynamic updates.

Flutter: Dart, native compilation, no bridge, limited dynamic updates.

Further details are available in the referenced articles.

Xianyu’s Flutter Breakthroughs

Hybrid Stack Management

When mixing Flutter and native pages, two separate navigation stacks exist (Flutter’s Navigator and Android’s ActivityStackSupervisor). Xianyu evaluated four solutions and adopted a reusable FlutterView approach (Solution 2) to reduce memory overhead.

Memory tests showed that reusing FlutterView saves native memory (0.65 MiB vs 0.73 MiB) while keeping Java memory stable.

Data source: Android Flutter Memory Exploration

Component Interaction

Layer conflicts can cause black‑screen issues when a Flutter page pushes a native view that shares the same GPU layer. The solution is to launch native UI in a separate window or view.

Project Structure & Build Artifacts

The hybrid project combines native Android/iOS modules with Flutter modules. Flutter artifacts are exported as AAR packages and published to a Maven repository, allowing native modules to depend on them without requiring a full Flutter build environment on every server.

Media Performance Optimizations

Flutter’s default image cache (LRU, max size 1000) can cause OOM. Xianyu introduced two strategies to reduce memory usage and improve decoding speed.

Online Results & Maturity

Performance tests on iPhone 6 (iOS 11.3) compared Flutter and native detail pages. The results show comparable frame rates and a stable crash‑rate curve after several Flutter releases, indicating maturity comparable to native.

Discussion

Flutter is still in a preview stage; large‑scale validation and robust monitoring are needed. The article invites developers to collaborate on improving Dart coding standards, middleware bridging, rapid release pipelines, and automated testing.