Flutter is an open source, cross-platform mobile development framework developed by Google. Applications developed with Flutter fit the native experience of different platforms, making them look and feel more compatible with the system.

How to efficiently build cross-end APP based on Flutter? This issue will invite Alibaba wireless technology expert Jifeng to share the development practice of idle fish.

What is a Flutter?

Flutter is a new mobile UI framework that allows you to build high-performance Android and iOS apps using the same code base. Flutter is also the development platform for Google’s upcoming Fuchsia operating system. The Custom Flutter engine, which can be embedded into other platforms, aims to help developers develop high-performance, high-fidelity Apps for Android and iOS using a single set of code.

Why do idle fish use Flutter?

The original performance

Flutter will be available to developers with Native features that are very close to traditional Native features, including rendering, AOT compilation, and other optimizations.

Flutter develops the same pages as Native. On low-end Android devices, apps based on Flutter will have smoother frame rate and lower memory consumption.

Rapid development of

Flutter speeds up traditional Android development dramatically because of its cross-terminal nature. It is generally believed that front-end development is faster, with Flutter, than front-end development.

Unified application development experience

At the cross-end level, because Flutter sinks the rendering mechanisms at both ends into a lower rendering layer, the underlying UI framework is based on a unified C++ layer rendering engine. Therefore, Flutter makes the cross-end experience more consistent.

Flutter development has many advantages. Can IT be quickly rolled out for use in business scenarios? Jifeng said that there were more problems than expected. He gave examples of the problems encountered during the development process:

“For example, memory issues. As the stack of Flutter pages gets deeper and deeper, memory is not freed in time. For example, the font problem. Different fonts render very differently on different machines. Another example is the problem of black screen in screenshots. There is also the issue of image caching. It’s a completely different system than image caching on Android. In addition, there are also dark areas, adaptation issues, adaptation of proprietary libraries and Ali middleware, as well as the fact that it does not support reflection and serialization. How to integrate Native components into the Flutter system is a big problem…”

So how did Idle Fish develop with Flutter?

The mixed development practice of Flutter and Native

The current solution for Idle fish is to share external cache textures in the form of ids. The preferred option is to integrate Flutter with Xianyu’s existing APP, which has Native, Flutter and H5 pages at the same time.

The details page of Xianyu contains the functions of mixing stack, video, animation, native components, multi-picture, message building and so on. The page is more complex and is one of the most important pages of Xianyu. The selection of the product details page as the first Flutter page is an important factor in the success of idle fish in using Flutter quickly.

Secondly, data consistency should be maintained during the embedding of Native components in the Flutter page. Data consistency refers to the need for consistency of data dependencies across multiple pages. In the process of rapid iteration of page development, the reuse of code is relatively low, and the later maintenance cost is high, so it is a difficult problem to solve the data consistency.

In response, Xianyu built new architectures based on Flutter — Redux and Component.

Redux is primarily used for application state management and can solve data set problems. It will completely follow the concept of community. Based on Redux, the concept, definition, signature and implementation of the community will be followed in the most standard form.

Once Redux solves the centralization problem, components based on Redux will go on to fulfill their needs, including splitting, more reuse, and so on. This concept is like having a page with some components under it and some stateless, stateless expressions at the end. At the data level, it has a unique store that pushes corresponding components, which is the half-dumb model.

Because traditional components do a lot of things, including rendering, processing interactive data, and modifying data, components that can’t modify their own data are called semi-dumb models, which allow for a 100% data-driven view architecture.

Ultimately, such an architecture addresses data consistency and code reuse and provides components including components at the reuse level, accelerating code isolation, code readability, and standard specification landing.

Overall, the Flutter programming model has three advantages: excellent performance, timely development efficiency, and a very good cross-end experience.

Flutter allows a single image to automatically generate multiple UI codes. The UI code does not require a lot of human intervention. Other engineers can focus on business-level solutions and implementing recommendation systems.

What do the developers think is worth learning from and can be improved on the cross-development practice of Idle Fish Flutter? Feel free to leave a comment