Boosting Mobile Development: Mastering Flutter‑Native Hybrid Integration

Introduction

Flutter is Google’s open‑source UI toolkit that enables developers to efficiently build multi‑platform applications from a single codebase, supporting mobile, web, desktop, and embedded platforms. Many industry partners and domestic companies have built their own Flutter engineering systems to serve various business scenarios.

Benefits of Flutter technology include:

Improved development efficiency: a unified codebase and hot‑reload for rapid UI changes and debugging.

Improved delivery efficiency: simultaneous releases across platforms, allowing business requirements to be completed by a single deadline.

Enhanced user experience: consistent UI across platforms with near‑native performance.

Human‑resource savings: reduced design, testing, and development effort.

Since 2020, the Zhenkunxing mobile team faced the following challenges:

Rapid business growth required developers, product managers, and testers to handle multiple products simultaneously, demanding a solution to boost development, testing, and delivery efficiency.

Distributed R&D teams in Beijing and Shanghai used the SAFe agile framework, yet mobile teams still needed to coordinate product, testing, and design across different domains, prompting a need to lower communication costs.

After technical research, the team decided to fully embrace Flutter to improve mobile development efficiency. Because a full migration to Flutter carries high cost and risk, a pragmatic approach is to adopt a progressive native‑to‑Flutter migration, maintaining a mixed native‑Flutter environment based on business and technical needs.

Hybrid Technical Solution Selection

FlutterBoost is a plugin that treats Flutter like a WebView, allowing easy integration of Flutter into existing native applications. It uses a shared‑engine model where a native container drives a Flutter container, achieving synchronization between native and Flutter containers. Flutter renders content that the native container delivers. FlutterBoost handles page mapping and navigation, requiring developers only to specify page names and parameters (often URLs). Its advantages are:

Reusable generic hybrid solution.

Supports more complex hybrid patterns, such as non‑intrusive tab implementations without modifying Flutter code.

Supports universal page lifecycle management.

Clear and unified design concept.

Global Router Construction

In a Flutter‑Native hybrid project, the first task is to build a global router using FlutterBoost to manage navigation among Native pages, Flutter pages, and between Flutter modules.

In the Flutter module, define routes in

main.dart

as shown in the diagram below:

Native opens Flutter pages (Activity or Fragment) via

BoostFlutterActivity

and

FlutterFragment

.

Implementation: define a

FlutterRouter

class to open Flutter Activity and Fragment. The

flutterRouter

map corresponds to all routes defined in

main.dart

. This map is used by FlutterBoost to open pages. Later, the

openPageByUrl

method is added to handle native routes.

In the Flutter module, page navigation does not use the native

Navigator

. Instead, FlutterBoost provides a unified method

FlutterBoost.singleton.open

, which calls the plugin’s

openPage

method. That method ultimately invokes the native

INativeRouter

implementation.

In the

INativeRouter

implementation, routing is delegated to the previously defined

FlutterRouter

, completing the

openPageByUrl

method to handle all routes. Consequently,

FlutterRouter

can process every native and Flutter route.

Global Router Parameter Handling

During route navigation, we must consider how to pass and receive parameters. Parameters include primitive types, List data, and object data.

Native → Flutter : Parameters are placed into a

SerializableMap

and passed to Flutter. Basic types are accessed directly; object data is transmitted via JSON.

Flutter → Native : Simple

Map

parameters are handled by

FlutterRouter

’s

ARouter

without special processing. Object parameters require JSON conversion; however, the project recommends using

Map

for uniform handling by

FlutterRouter

.

startActivityForResult Handling

In Android, launching another Activity and receiving a result is common. When a Flutter page is opened via a module, the result is returned through

FlutterBoost.singleton.closeCurrent(result: result, exts: exts)

, which calls

FlutterBoostPlugin

’s

closePage

method.

If the

result

map is not empty,

setResult

is invoked with the key

RESULT_KEY = "_flutter_result_"

. Therefore, for a

startActivityForResult

launched Flutter page, simply place the return value into the

result

map.

MethodChannel Interaction

Flutter’s platform‑specific APIs rely on flexible message passing via platform channels rather than code generation. The app’s Flutter side sends messages through a platform channel to the host (iOS or Android). The host listens, processes the message with native APIs, and sends a response back to Flutter.

During FlutterBoost initialization, a

MethodChannel

is created in

BoostLifecycleListener

to provide communication with the client.

Conclusion

The article presented the interaction between Flutter and native code in a hybrid development scenario, covering page invocation, parameter transmission, data exchange, a global router that works across modules, and MethodChannel communication. The mixed approach improves development efficiency, UI consistency, testing speed, and overall project maintainability while highlighting the need for careful coordination of shared components.