Flutter Practice and Architecture in Mobile Development at Hello Travel

On May 22, 2021, the Hello Technology Salon "Big Front‑End Exploration and Practice" was held in Hangzhou. The session titled "Mid‑Platform Business Flutter Practice" was presented by @石旭盼.

The talk first reviewed the historical background of mobile cross‑platform technologies, dividing them into three periods: the Hybrid period (around 2009, using HTML/JS with WebView), the DSL‑mapping period (2015, React Native introduced a DSL that maps to native components), and the self‑drawing engine period (2018, Google released Flutter, which uses the Dart language and the Skia engine to render UI directly, achieving native‑level performance).

A comparative analysis of these three periods highlighted Flutter’s advantages in development language, rendering method, performance, development efficiency, multi‑device consistency, and ecosystem activity, making it suitable for large‑scale commercial use.

The presentation then described Flutter’s three‑layer architecture: the top Framework layer for app development, the middle Engine layer providing cross‑platform capabilities (including the Skia rendering engine), and the bottom Embedder layer that integrates Flutter into native platforms.

Next, Hello Travel’s extensive Flutter practice was introduced. The company has already deployed Flutter in three apps, covering more than nine business lines and over one hundred pages, and plans to expand its use to new business lines.

Two major challenges were identified: (1) how to quickly expose existing native core and mid‑platform capabilities to Flutter, and (2) how to improve development efficiency of native features using Flutter. To address these, Hello Travel built two container solutions:

Sparrow Microservice Container : a microservice framework that registers native capabilities (both core and business) via compile‑time annotations and makes them available to Flutter through a unified API.

Lumos Cross‑Platform Business Container : a container that encapsulates business logic, providing a consistent, reusable Flutter interface while preserving native UI performance.

The Sparrow container’s architecture consists of a base capability layer (native core and third‑party libraries), a service layer (business, base, and third‑party microservices), and an API layer that exposes these services to the Flutter business layer. Registration is performed via compile‑time annotations on Android (Java) and iOS (Objective‑C macros), and the services are invoked from Flutter through a channel mechanism.

The Lumos container follows a five‑layer design: native business layer, container protocol layer (communication between native and Flutter), cross‑platform business layer, container capability layer (network, timers, data parsing), and base capability layer. It enables native UI pages to call Flutter‑implemented business logic and receive results via the Flutter channel.

Both containers have been applied in real scenarios such as a train‑ticket booking feature that requires native location services and an account login flow, demonstrating seamless interaction between native and Flutter components.

In conclusion, the integration of native capabilities into Flutter and the use of cross‑platform containers have accelerated Hello Travel’s mobile development, improved consistency across devices, and reduced development effort. Future work will focus on media resource sharing, Flutter stability monitoring, dynamic updates, and smooth SDK version upgrades.