How MixStack Solves Flutter‑Native Integration Challenges on Android

Introduction

Flutter is Google’s mobile UI framework that enables rapid development of high‑quality native interfaces on iOS and Android. Compared with other cross‑platform solutions like React Native, Flutter offers consistent cross‑platform rendering, fast hot‑reload, and a mature toolchain.

Problems When Integrating Flutter

When integrating Flutter into an existing Android project, several issues arise:

Each FlutterActivity or FlutterFragment creates a new FlutterEngine , resulting in separate isolates, duplicated memory (e.g., multiple copies of the same image), and complex communication for shared state such as login status.

Sharing a single FlutterEngine can cause the UI to freeze because the engine is not correctly managed across activities.

The rendering lifecycle of native containers becomes incorrect when the engine is shared, leading to unexpected pauses, white screens, and dialog glitches.

Page‑stack management does not follow the expected “last‑in‑first‑out” behavior, causing all Flutter pages to close simultaneously when an activity finishes.

These challenges also manifest as screen flickering, app launch white screens, incorrect status‑bar colors, and other visual glitches.

Solution: MixStack

MixStack addresses the three core problems with the following strategies:

Shared FlutterEngine : A single global engine is cached, ensuring shared isolates, unified memory, and consistent global state.

Correct Rendering Lifecycle : Modify the native containers so that each FlutterView attaches to the engine only when visible (onResume) and detaches on pause, respecting the engine’s AppLifecycleState (resumed, paused, detached).

PageContainer Concept : Each native Flutter container maps to a dedicated PageContainer in Flutter, each with its own Navigator . The container receives a rootRoute , maintains independent navigation stacks, and synchronizes lifecycle events via channel communication.

MixStack also handles back‑navigation synchronization on both iOS and Android, and provides APIs to manage insets without triggering unnecessary re‑renders.

Implementation details include:

LifecycleChannel events (resumed, inactive, paused, detached) are used to start or stop rendering.

For activities, onResume() attaches the engine to the visible FlutterView , and onPause() detaches it before launching another activity.

For fragments, onResume() and onPause() are similarly managed, with additional checks in onHiddenChanged() to ensure only the visible fragment renders.

Effects and Validation

MixStack has been deployed in the Red‑Sleeve app of the Yuewen group, successfully removing the dependency on React Native while maintaining all daily feature deliveries. The solution handles multiple FlutterFragments, various dialog types, and seamless switching between native and Flutter pages without visual artifacts.

Conclusion

MixStack provides a complete approach to managing native‑Flutter hybrid pages, solving engine sharing, lifecycle, and navigation stack issues. It is open‑source and suitable for any Flutter, iOS, or Android engineer looking to integrate Flutter into existing native applications.