Building a Scalable Flutter Cross‑Platform App: Architecture, Engine Sharing & Crash Management

Introduction

“Write once, run anywhere” is the slogan used by Sun to showcase Java’s cross‑platform capability, but differences among JVM implementations mean extensive testing is required. Similarly, mobile cross‑platform solutions have proliferated in recent years.

Cross‑Platform Landscape

Early hybrid approaches such as PhoneGap/Cordova

React Native, Weex

Progressive Web Apps

Mini‑programs

Flutter

Other frameworks like Xamarin, Ionic

The article does not discuss the pros and cons of each framework; it focuses on a practical Flutter implementation.

Why Flutter?

Flutter uses the Skia rendering engine and the Dart language, which supports both AOT and JIT compilation, offering native‑like performance and a smooth development experience.

Project Overview

The client team of Xueersi 1‑to‑1 decided to adopt Flutter for a new project to address tight schedules and limited resources.

Flutter’s Role in the Project

The project is a new Flutter application that also reuses existing storage, hybrid, network, and routing libraries.

Architecture diagram:

Engineering Practices

Code management follows an MVP structure on Android and MVVM on iOS. The Flutter project adopts a class‑MVVM style with directories:

Api : unified external interfaces.

Channels : communication layer based on Flutter channels for shared capabilities such as push, long‑connection, network, routing, storage.

Bases and Modules : business logic organized into MVVM‑like model, logic, and widget layers.

Resource management uses a simple file‑based approach; images are loaded with

Image.asset("resources/common/bg_image_placeholder.png")

.

Dependency management relies on Pub for Dart, Gradle for Android, and CocoaPods for iOS.

UI Mixed Development

Some UI pages still require native implementation, especially for audio/video. The mixed‑stack issue is illustrated with screenshots and solved by three approaches: creating a new engine per page, sharing a singleton engine, and a message‑driven engine‑sharing solution implemented by the team.

Routing

The existing native routing framework provides app‑to‑app jumps, Open‑URL support, page interception, and security features. Flutter’s Navigator is less convenient, so the team built a unified DRouter that abstracts routing across Android, iOS, and Flutter, using channel communication and URL‑based entry points.

Communication Mechanism

DRouter relies on Flutter’s BasicMessageChannel, MethodChannel, and EventChannel to expose storage, permission, and other capabilities to the Flutter side.

Crash Monitoring

Dart runs on a single‑threaded event loop with micro‑task and event queues. Flutter catches widget build exceptions using try/catch/finally in

performRebuild()

and renders an error widget instead of crashing. The article shows how to replace the default error page and report errors via

ErrorWidget.builder

,

FlutterError.onError

, or

runZoned

.

<code>abstract class ComponentElement extends Element {</code><code>  ComponentElement(Widget widget) : super(widget);</code><code>  Element _child;</code><code>  @override</code><code>  void performRebuild() {</code><code>    // ... build logic with try/catch ...</code><code>  }</code><code>  @protected</code><code>  Widget build();</code><code>}</code>

Future Outlook

The team plans to publish more detailed performance comparisons and explore further integration of Flutter with backend services, dynamic plugins, and mini‑program ecosystems.