Cross‑Platform Mobile Development: Evaluation and Implementation of Flutter and H5 Hybrid Solutions

Background

Android apps are typically written in Java or Kotlin, while iOS apps use Objective‑C or Swift. Developing separate native codebases for each platform leads to duplicated effort. Since 2019 the team has explored cross‑platform solutions to improve efficiency.

Available options at the time included React Native, Weex, H5 offline (Hybrid) and the then‑emerging Flutter. The goal was to find a stable, business‑fit technology that could be deep‑dived.

Research and Considerations

Cross‑platform frameworks fall into two categories: JavaScript‑Core‑based (e.g., React Native) and self‑rendering‑engine based (e.g., Flutter). The team also evaluated a Web‑based H5 Hybrid offline approach.

Framework Layer + Native Rendering

This approach uses JavaScript (same syntax as React) but relies on native components for rendering. It offers good user experience but limited performance.

Web‑Based H5 Hybrid Offline

Development cost is minimal because it is essentially a web page. The main challenges are performance and network latency. An offline package delivered via a CRM platform and loaded through WebView is used to mitigate these issues.

Framework Layer + Self‑Rendering Engine

This approach does not rely on native rendering; instead it uses its own rendering engine, resulting in shorter rendering paths, higher performance, and better consistency across platforms. Flutter is the representative framework.

Comparison and Decision

The team evaluated programming language, performance, architecture, development efficiency, community support, team expertise, and future roadmap. Flutter offered superior performance and a mature ecosystem, while the H5 Hybrid offline solution was simple, low‑risk, and gave the team autonomy.

Consequently, both solutions were selected for pilot testing.

Flutter Overview

Flutter is Google’s UI toolkit for building native‑quality iOS and Android apps from a single codebase. It is open‑source, free, and supports multiple platforms (mobile, web, desktop, embedded). Its key advantages are cross‑platform coverage, native‑like performance, and a rich UI library.

Online Validation of Solutions

Two‑phase plan for the H5 Hybrid offline solution: (1) implement core framework and launch a page on the BOS side to collect runtime data; (2) build a CRM platform to manage offline packages.

The architecture consists of a code layer, protocol layer, Hybrid SDK layer, and offline‑package management system. Requests from the H5 page are intercepted, matched to local resources, and served without network latency.

Flutter Implementation

Key steps included establishing a Flutter Module as a host, integrating the module into native projects, and configuring CI (Jenkins) jobs to build and package Flutter artifacts for Android and iOS.

Further work covered page routing, lifecycle management, animation, and provider‑based UI composition. A MVVM‑style structure separates Page (UI) and VM (business logic) with dedicated lifecycle events and communication channels.

Experiment Results

After deployment, both solutions were stable (no crashes). Flutter outperformed the H5 Hybrid offline approach in load speed, white‑screen time, and overall performance, leading to its selection as the primary cross‑platform framework.

Framework Evolution

Version 1.0 : Built basic infrastructure – page routing, data bus, network module, resource management, component management.

Version 2.0 : Addressed challenges such as state management, page lifecycle, and missing plugins. Introduced a MVVM‑compliant architecture with separate Page and VM layers, lifecycle event propagation, and animation utilities.

Flutter Map Component

Because existing map plugins were insufficient, a custom map component was created using Flutter’s PlatformView. Native views are instantiated, rendered by Flutter, and communicate via a bidirectional channel for events and commands.

Standardization and Repository Consolidation

The team reorganized scattered Flutter repositories into a unified HBFlutter monorepo, grouping middleware, core components, native capabilities, and other modules.

Technical Summary

Flutter has been rolled out across two major business lines, achieving near‑full migration. Development efficiency improved dramatically, and UI consistency between Android and iOS was resolved. Ongoing work will monitor Flutter’s evolution and apply it where appropriate.