Practical Experience of Using Flutter for Cross‑Platform Mobile Development at Xueersi Online School

"Write once, run everywhere" is the slogan used by SUN to showcase Java’s cross‑platform capability, but differences among JVM implementations often lead to the joke “Write once, debug everywhere”. Similarly, the mobile world has seen a surge of cross‑platform frameworks such as PhoneGap/Cordova, React Native, Weex, Progressive Web Apps, mini‑programs, Flutter, Xamarin, Ionic, etc.

The article does not discuss the pros and cons of each framework; instead it aims to give readers a quick overview of cross‑platform technologies, focusing on Flutter’s recent popularity, community support, and its engine‑level advantages.

Flutter builds on the Skia graphics library, providing a self‑rendering engine that delivers near‑native performance. It uses Dart, a cross‑platform language that supports both AOT and JIT compilation, offering a smooth development experience and high runtime performance.

The Xueersi mobile team adopted Flutter for the 1v1 parent app after a tight schedule and limited resources, integrating existing native libraries (storage, hybrid, network, routing) into a new Flutter project.

Flutter in the Project

From a top‑level design, the project consists of a Flutter UI layer (orange area in the diagram) and several shared native modules. The directory structure includes:

工程代码管理

Api directory for unified external interfaces

Channels directory for platform‑agnostic communication (Push, long‑connection, network, routing, storage)

Bases and Modules directories following a class‑MVVM style (model, logic, widgets)

Optional directories can be omitted based on specific business scenarios to avoid redundancy.

Resource Management

Flutter assets are managed by file hierarchy; high‑resolution images are placed in separate folders. Images are loaded via Image.asset("resources/common/bg_image_placeholder.png") , and developers can replace the default error widget by customizing ErrorWidget.builder in main.dart .

Dependency Management

Dart uses Pub, Android uses Gradle (Maven), and iOS uses CocoaPods. Detailed dependency‑management strategies are omitted for brevity.

UI Mixed Development

When mixing Flutter pages with native pages, view‑stack inconsistencies can cause Flutter pages to be rendered behind native views. Two main solutions exist: (1) recreate a new engine for each native‑to‑Flutter transition (simple but memory‑heavy) and (2) share a singleton engine across pages (faster, but requires more engineering effort). The team implemented a hybrid approach using a unified navigation entry and Flutter channels to manage stack transitions without recreating the engine.

Routing

The existing native router provides URL‑based navigation, external app jumps, page interception, and security features. Flutter’s built‑in Navigator was found cumbersome and tightly coupled to page classes. Therefore, a unified router named DRouter was created to abstract navigation across Android, iOS, and Flutter, exposing a single API for developers.

Communication Mechanism

DRouter relies heavily on Flutter’s channel system ( BasicMessageChannel , MethodChannel , EventChannel ) to bridge native capabilities (storage, permissions, etc.) with Dart code.

Crash Monitoring

Flutter’s single‑threaded event loop separates micro‑tasks from event‑tasks. Exceptions are caught within the framework’s performRebuild() and build() methods, rendering an error widget instead of crashing the app. Developers can replace the error widget and report errors via four approaches:

Override ErrorWidget.builder in main() to report and display a custom page.

Replace the internal _debugReportException() handling.

Set a custom FlutterError.onError callback.

Wrap the app in runZoned() to capture uncaught exceptions.

Future Outlook

The team observed significant benefits from cross‑platform development but acknowledges remaining performance evaluation work. They anticipate broader adoption of Flutter‑based mini‑programs and a unified full‑stack mobile platform, reducing native‑specific maintenance overhead.