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.