Shulou(Shulou.com)06/03 Report--

This article mainly explains "the implementation principle of flutter_mp and the effect of converting and running in Mini programs through flutter_mp." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "the principle of flutter_mp implementation and the effect of converting through flutter_mp and running on the end of Mini programs"!

Brief Introduction of Principle

Although there are still a lot of features not completed, let's talk about the implementation principle of the whole flutter_mp first. For space reasons, we will briefly explain only a few important parts of flutter_mp below.

Let's see how flutter_mp actually works:

Flutter version official layout sample:

Effects converted by flutter_mp and run on the side of Mini programs

Declarative UI Handling

Flutter is a declarative UI framework. Declarative UI only needs to describe what the UI looks like to the framework without caring about the specific implementation details of the framework. For Flutter, the upper UI description uses the underlying skia graphics engine to process it as native Flutter, while replacing the underlying processing with html/css/canvas is flutter_web, and flutter_mp is to explore the processing of these UI descriptions on class Mini programs.

Let's look at the simplest example.

var x = 'Hello World'Center( child: Text(x));

For the UI structure above, we only need to correspond to the following structure in the wxml file of the Mini programs.

// wxml section {{x}}// js Component({ data: { x: 'Hello World' }})

Although the actual structure is much more complex than the above, but from the above simple example, we know that at least two things need to be done:

We need to generate wxml template files of related Mini programs according to Flutter code to collect data needed for wxml rendering and place them in data field of Mini programs component.

wxml structure generation

We know that Mini programs cannot manipulate nodes dynamically, and wxml structures need to be generated in advance, so Flutter runs before Mini programs, there will be a compilation packaging stage, which will traverse Dart code and generate wxml files according to certain rules (the compilation stage will also do another important thing mentioned below--compile Dart into js).

Specifically, we will first process the Dart source code into an analyzable AST structure, which is a tree representation of the source code. We then traverse the AST syntax tree structure in depth to generate the target wxml, as follows:

The difficulty in building wxml structure is that Flutter is not only a declarative UI or a "value UI". What is a "value UI"? Simply put, Flutter treats UI as a common value, similar to a string, a number-like value, and since it is a common value, it can participate in all control processes, whether it is a function return value or a function parameter, etc. Although wxml of Mini programs is also a declarative UI, it is not a "value UI." wxml is more like a template and more static. How to express dynamic "value UI" in static wxml is the key to building wxml structure.

Here's an example.

Widget getX() { if (condition1) { return Text('Hello'); } else if (condition2) { return Container( child: ... ); } else if (condition3) { return Center( child: ... ); } ...} Widget x = getX();Center( child: x // < ---How to deal with x here?);

Here child: x x is a dynamic value, its specific value needs to be determined at runtime, it may be an arbitrary Widget, how to handle the dynamic x here on static wxml? Inspired by the Alita framework, this is mainly done with the help of the dynamics of Mini programs templates (the template's is attribute accepts variable values). There are several steps:

1. First, when traversing the AST structure of Dart source code, each independent and complete "UI value" fragment will be corresponding to the template of wxml, such as the UI in getX above.

Hello ... ...

2. When encountering a dynamic value like x, the fixed one will generate a template placeholder.

3. During the operation phase, according to getX

The result of the function determines the "UI value" of the x mapping. If condition1 in getX is true, then the value of templateName here is template001. For specific data calculation and collection work, refer to the "Rendering Data Collection" process below. You can see how flutter_mp handles the "value UI," which is completely referenced by Alita.

Rendering Data Collection

Unlike wxml, which is generated at compile stage, rendering data is runtime information that can change at any time depending on setState. So how do we collect the rendering data we need?

If we follow Flutter's architecture diagram, it's hard to insert the hook functions we collected, and Flutter's architecture is too heavy for Mini programs. These processes in the red box below are unnecessary for rendering Mini programs. Finally, because the final code will be converted to js, and Flutter itself depends on many libraries that do not support the conversion of js, such as dart:ui and so on.

So we implemented a minimalist version of Flutter Mini programs mini_flutter. At compile time, we will replace all references to Flutter library with mini_flutter. Mini_flutter only exists until the Rendering stage of the above figure. This Rendering implementation is also customized for Mini programs. During runtime, Rendering continuously collects information about Widgets. Finally, a JSON structure of UI description is generated. This structure contains the templateName and templateData mentioned above. UI description will be obtained by lower layer Mini programs and used to render UI of Mini programs. The architecture diagram is as follows:

Dart/JS: Transformation and Interoperability

Flutter is developed in Dart, and Mini programs run in browsers, so we also need to compile Dart into JavaScript code.

This point was also mentioned in the compilation and packaging phase above. This process mainly uses the dart2js tool provided by Dart. However, for the environment of Mini programs, the generated js code still needs to be adapted. In addition, although they are all JS code, the js generated by dart2js and the native js of Mini programs are isolated, that is, they cannot share variables, methods, etc. They are executed in their own "domain."

This raises two questions:

1. Widget initialization or setState update, generated UI description JSON, how to pass to Mini programs "domain"? 2. Related rendering callbacks. Events occur in the "domain" of Mini programs. How can these information be transmitted to Dart?

To summarize: How does Dart (which eventually compiles to JS) interoperate with native JS of Mini programs?

The solution to this problem is to use dart:js and package:js libraries:

Dart Operation JS

So when Dart code calls the stringify method, it actually executes the window.JSON.stringify method.

JS Operation Dart

// dart Register main() { context['dartHi'] = () { print('dart hi! '); };}// js calls window.dartHi()

This is just a brief description of the interoperability between Dart and JS. In addition, since the running environment of Mini programs is the browser environment after castration, the implementation of flutter_mp is slightly different.

In short, Dart and JS are interoperable, thus opening up the upper Flutter environment and the lower Mini programs environment.

layout system

Flutter's layout system is different from CSS, but similar to CSS.

In the Rendering phase mentioned above, an equivalent css style is generated based on the Widget's layout properties, categories, and constraints. Note that boundary constraints are context-dependent here. For example, the actual size of a Container without width and height is not only related to the child element, but also related to the boundary constraint conditions passed by the parent element. This is actually more troublesome. Can the Widget attribute of Flutter and the boundary constraint be completely expressed in css? We are still looking for an effective solution.

summary

Like flutter_web, it is impossible to render all the features of Flutter to Mini programs completely. Generally, we think it should be part of the page, and some functions need to run on Mini programs, so it is meaningful to use flutter_mp.

At this point, I believe everyone has a deeper understanding of "the principle of flutter_mp implementation and the effect of converting through flutter_mp and running on the end of Mini programs." Let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.