How to Use Flutter for Hybrid Development: Alibaba’s Open Source Code Instance

Status Quo and Thoughts

FlutterBoost: A New Generation Hybrid Technology Solution

Refactoring Plan

  • Reusable universal hybrid solution
  • Support for more complex hybrid modes, such as support for homepage Tab
  • Non-invasive solution: The solution of modifying Flutter is no longer relied upon
  • Supports for universal page lifecycle
  • Unified and clear design concepts

Main Concepts

Native Layer

  • Container: Native container, platform Controller, Activity, and ViewController
  • Container Manager: manager of the container
  • Adaptor: Flutter is the adaptation layer
  • Messaging: Channel-based message communication

Dart Layer

  • Container: The container used by Flutter to hold widgets, specifically implemented as the derived class of Navigator.
  • Container Manager: To manage Flutter containers and provide APIs, such as Show and Remove.
  • Coordinator: The coordinator that receives Messaging messages and is responsible for calling the status management of the Container Manager.
  • Messaging: Channel-based message communication

Understanding of Pages

Main Differences from the Old Solution

Implementation of Multiple Navigators

  1. Create a Native container (iOS ViewController, Android Activity or Fragment).
  2. The Native container notifies the Flutter Coordinator through the message mechanism that a new container is created.
  3. The Flutter Container Manager is then notified to create the corresponding Flutter container, and load the corresponding widget page in it.
  4. When the Native container is displayed on the screen, the container sends a message to Flutter Coordinator notifying the ID of the page to be displayed.
  5. The Flutter Container Manager finds the Flutter Container of the corresponding ID, and sets it as a visible container on the foreground.

Officially Proposed Hybrid Solution

How It Works

Official Recommendations

Deep Engine Sharing

Multi-Engine Mode

Problems of the Multi-Engine Mode

  • Redundant resources: In the multi-engine mode, the Isolates between each engine are independent of each other. Logically, this does not cause any harm, but the underlying layer of the engine actually maintains the image cache and other memory-consuming objects. Imagine that each engine maintains its own image cache, which can be very memory intensive.
  • Plug-in registration: Plug-ins rely on Messenger to transmit messages, while Messenger is currently implemented by FlutterViewController (Activity). If you have multiple FlutterViewControllers, the registration and communication of plug-ins will become chaotic and difficult to maintain, and the source and target of message transmission will become uncontrollable.
  • Page differences between Flutter Widget and Native: Flutter pages are widgets, and Native pages are VC. Logically, we want to eliminate the differences between the Flutter page and the Native page. Otherwise, unnecessary complexity appears when we perform page tracking and other unified operations.
  • Increased complexity of communication between pages: If all Dart code runs in the same engine instance and they share an Isolate, a unified programming framework can be used for inter-widget communication. And, multi-engine instances also make this case more complex.


Extension and Supplement


Support for Release1.0


Original Source



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website: