DStack- A hybrid development framework based on Flutter

This technology has a long history of hybrid development, currently the mainstream in the market are Hybird, ReactNative, Weex, Flutter and so on. Among them, The Flutter has become the most popular hybrid development program in the past two years due to its unique implementation and excellent performance. Our 1V1 client team of Xueersi Online School also started the research on the technology of Flutter relatively early, and carried out large-scale practice attempts on the two apps of Xueersi Online School 1V1 parent App and Xueersi Online School 1V1 teacher App. Thus, a set of its own hybrid scheme DStack was precipitated.

Why have a mixed solution?

1. The 1V1 parent site is a pure Flutter project. Although developing apps with Flutter can greatly improve people’s performance, some pages of the pure Flutter project need to be implemented in native language, such as webView, video page, etc.
2. The 1V1 Teacher App is a native App with a certain scale, but some modules are implemented with Flutter.

The above two cases are native page and flutter interact, interact when two pages, for example, the data transmission between mixed transitions between pages, pages, gestures sliding control, routing management, memory resources, these are all need to solve the problem, based on this, we turn to the official solution, And The Flutter_boost framework of Alixianyu team, etc., to carry out the solution selection and concrete implementation of DStack according to the specific situation of our business and engineering.

1. DStack definition

What is DStack?

Learning and thinking network school 1V1 client team research, node based management, simple to use, easy to integrate, excellent performance of the mixed development framework. At present, the framework has been launched in the parent-side and teacher-side apps of Xueersi Online school, with significantly improved memory performance and good stability. DStack also provides the Flutter community with a new way of thinking about hybrid stack management, changing the paradigm of mobile development.

Two, DStack implementation and characteristics

What is a mixing stack?

The stack structure formed when native pages and Flutter pages are opened in turn during mixed development has multiple page types, as shown in the figure below



The blue square NA represents the Native page and the orange square F represents the Flutter page

DStack for standard flutter_boost

As we can see, there are alternate pages between native pages and Flutter pages in the stack structure. The only open source framework currently available in the Flutter community is Flutter_Boost. Flutter_boost is a hybrid development stack management framework for Flutter developed by alixanyu team. The project has a 3.9K star on Github.

So the question is, if the community has a proven solution, why don’t we use it? The main reasons are as follows: first, the implementation principle of Flutter_boost is not applicable to our pure Flutter project; second, it is in preparation for our team’s subsequent mixed development on MAC, iPad and PC; third, we have high performance requirements. The way flutter_Boost is implemented, it doesn’t take advantage of the features of the Flutter technology and doesn’t perform well. In conclusion, we need to develop a more applicable hybrid development framework, DStack.

How to do?

1. Manage the mixed stack based on nodes

In the implementation of the DStack framework, we abstracted each native page and Flutter page into a “node” data structure. Each page corresponds to a node, and the node has some information about the page. Through the data structure of the node, we shielded the specific type differences of the page in the implementation.

What are the benefits of being node based?

• Abstract the specific page implementation, easy to manage;
• Provides greater extensibility.

NA stands for Native page, F for Flutter page and H for Hybird page.

Since we have abstracted different types of pages into “nodes”, we can even add ReactNative pages or Hybird pages in addition to the Flutter pages and Native pages.

2. Determine the relationship between nodes and page behavior

In the image, pop means returning to the previous page, popTo means returning to the specified page, popToRoot means returning to the root page, and popSkip means returning to the specified module. In the figure, all pages of the “login” module are returned.



Each page returned and opened corresponds to a node record. The user’s behavior triggers node management, which drives page jump (namely stack management). Considering the difference between Android and iOS, node management is handled on the native side.

3. Design to use a simple API



4. Design a framework access mode for easy integration

We have already made DStack a PUB library for the Flutter side, and we only need to refer to the dependencies directly in the Flutter project.

5. Use engine reuse, excellent frame memory



After the 1.12 version of The Flutter, we applied the Official Reuse mechanism of the Flutter Engin, so that different Flutter controllers could share the same Flutter Engin with excellent memory performance.

Third, achievements achieved so far

1. The business

2. Performance

In terms of performance, we compared the Flutter_boost framework. We can see that the memory of Flutter_boost increases every time a new page is opened on both iOS and Android, while our memory data is stable unless the new Flutter controller is used up.

This is a comparison of page opening speeds on the Android side. We can see that unless the Flutter controller is newly opened, the page opening speed of The Flutter_boost and DStack is about the same. Otherwise, the page opening speed of the DStack is significantly better than that of the Flutter_boost.

3. The function

Here are some of the features of DStack and official solutions compared to FlutterBoost, with Y for yes and N for no.

Fourth, follow-up plan

1. Continue to output articles

This is the first article that DStack has contributed, just a brief introduction to the framework, and we will continue to contribute detailed implementation and pit mining guidelines to share our technology with the group.

2. Open source

We plan to open source DStack within the group, and we also hope to get the opinions and suggestions from teachers of other business divisions.

3. External open source

We have plans to open source the DStack externally to give back to the entire Flutter technical community.

Recruitment information