DStack: A Hybrid Stack Management Framework for Flutter and Native Integration

Hybrid development has long existed with solutions like Hybrid, ReactNative, Weex, and Flutter; among them, Flutter has become the most popular mixed‑development approach in recent years. The Xueersi 1v1 client team early adopted Flutter and applied it to both the parent and teacher apps, resulting in a large‑scale practice that led to the creation of their own hybrid solution, DStack.

Why a hybrid solution? The parent app is a pure Flutter project, but some pages (e.g., WebView, video) are better implemented natively; the teacher app is a sizable native app with certain modules integrated via Flutter. Both scenarios require interaction between native and Flutter pages—navigation, data passing, gestures, memory control, and routing—necessitating a robust stack management approach.

DStack Definition DStack is a self‑developed, node‑managed hybrid development framework that is simple to integrate, easy to use, and delivers excellent performance.

What is a hybrid stack? When native and Flutter pages are opened alternately, they form a stack containing various page types (native, Flutter, Hybrid). The article includes diagrams illustrating this stack.

DStack vs. flutter_boost While flutter_boost is the only open‑source solution in the Flutter community, its implementation does not suit pure Flutter projects, lacks performance optimizations, and does not support future extensions to iPad, macOS, or PC. DStack addresses these issues with a node‑based architecture.

How DStack works

1. Node‑based hybrid stack management

Each native or Flutter page is abstracted as a "node" containing page information, allowing the framework to hide type differences.

Benefits of nodes:

Abstracts concrete page implementations for easier management.

Provides stronger extensibility, enabling future integration of ReactNative or Hybrid pages.

2. Define node‑page behavior relationships

Operations such as pop, popTo, popToRoot, and popSkip are mapped to node actions, driving page navigation from the native side.

3. Simple API design

4. Easy integration

DStack is packaged as a Flutter pub library, requiring only a dependency declaration in the Flutter project.

Performance and results

1. Business impact: DStack is deployed in both parent and teacher apps, showing clear memory performance gains and stable behavior.

2. Performance: Compared with flutter_boost, DStack maintains stable memory usage except when a new Flutter engine is created, and offers faster page opening times in most cases.

3. Features: A feature matrix shows DStack provides capabilities (e.g., node management, engine reuse) that flutter_boost lacks.

Future plans

1. Continue publishing detailed implementation and troubleshooting articles.

2. Open‑source DStack internally within the company for feedback.

3. Release DStack to the external community to contribute back to the Flutter ecosystem.

End of article.