In our last article, “Attempts to develop small applications with Flutter (part 1)”, we discussed how to optimize the performance of Flutter For the Web by reducing Dom updates and event processing of the Flutter Framework. In this article, we will continue to explore the method of Flutter output to wechat applet.
This article discusses the following issues with you
- How to export the various Flutter widgets one by one
- How to keep the component state of Flutter widgets dirty and refresh them
- How to export the layout of Flutter widgets and map them to the Dom completely
- How to output the above research results to wechat small program.
How to export the various Flutter widgets one by one
If you are an experienced developer of Flutter, you will know that the Widget class of Flutter is well known. It is also possible to design a single Widget with Opacity control alone. As a rule, we should implement all the widgets of Flutter completely on the peer end (Web), which is a painstaking task.
However, a shift in thinking can always save time.
Although there are many Flutter widgets, they all derive from a handful of base classes. The most common ones are:
- SingleChildRenderObjectWidget
- MultiChildRenderObjectWidget
A complete component tree can be generated by simply exporting the two base classes and adding style attributes of some widgets. For example, Opacity Widget will be serialized into a JSON object of the following format.
{
"hashCode": 123."name": "opacity"."children": [...]. .// The children nodes
"constraints": {"x": 0."y": 0."w": 44."h": 44},
"attributes": {"opacity": 0.5}},Copy the codeWe will load Opacity’s relative location layout, style properties, and subviews into an object.
There are a total of 20+ widgets like Opacity, which only need to identify and serialize the most basic components to complete the export of the whole Flutter Framework.
Even with a complex component like ListTile, this approach works well because complex layout components are assembled from the most basic widgets.
How to keep the component state of a Flutter Widget dirty and refresh it
If you have studied the Flutter Framework, you know that there are three trees in the Framework.
The idea is to export the Element tree. Why the Element tree and not the Widget tree?
Because Element instances are reusable, every update to the build Framework interface is accompanied by the repeated execution of the build method. During each build process, the Widget instance will be destroyed, generated, destroyed again, and generated again. This means that every time the Flutter interface is updated, New Widget objects are generated, and if we were exporting the Widget tree, it would be difficult to implement Diff updates.
On the other hand, when creating an Element object repeatedly, the Widget tries to find a reusable Element object and resets Element’s parameters, while the Element object is cached and reused (hashCode remains unchanged).
Based on this principle, we were able to try to export the entire Element tree and implement a dirty refresh using hashCode as a tag.
As shown in the figure, we can identify the element E change and update the peer (Web) element with Diff. We can achieve better performance by using the dirty refresh method, which is used in various front frameworks such as React Vue.
How do I export the layout of a Flutter Widget and map it completely to the Dom
Prior to the development of MPFlutter, the author borrowed the layout used in The exploration of Flutter extension to wechat mini App. This paper proposes a way to reconstruct the layout of a particular Flutter Widget using a specific CSS style.
Such as:
Center Widget, you can use the following CSS styles to wrap the next child element in a centered layout.
{
display: flex;
justify-content: center;
align-items: center;
}
Copy the codeBut in the actual development process, this approach has a big problem. First of all, we cannot perfectly replicate the layout of all the Flutter widgets, such as AspectRatio, using CSS. Second, CSS compatibility issues have always been a pitfall, such as GridView and Wrap layouts that can only be implemented in the very new WebKit kernel.
To solve the problem another way, we can export the relative layout of each element (x, y, width, height) and then map the layout in CSS in the same way.
Also for the Center Widget, we export the following information.
{
"hashCode": 1."name": "center"."children": [{"hashCode": 2."name": "div"."constraints"{"x": 25."y": 25."w": 100."h": 100}}].// The children nodes
"constraints": {"x": 0."y": 0."w": 200."h": 200}}Copy the codeWe only need to use absolute layout on the other side (Web), plus the left top width height to restore the layout information.
How to output the above research results to wechat applets
We have successfully exported Flutter to the Web by compiling Dart into JavaScript using DART 2JS and recreating the view using the DOM API.
And what about wechat applets? In fact, it is the same principle, but wechat applet does not provide DOM API for developers to use. We can use the KBone library to emulate the DOM API to do the same.
Of course, MPFlutter also adds very useful build tools in addition to the DOM API.
For example, MPFlutter specifically provides the Universal_miniprogram_API library for calling various apis for applets in DART. For example, MPFlutter provides the MPKit library for calling the built-in components of a small application in a Flutter application, such as the Video Canvas WebView.
If you are interested in using Flutter to develop wechat applets or Web applications, please read our official documentation, which is very easy to understand.
About MPFlutter
MPFlutter is a community open source project initiated by PonyCui. It aims to promote Flutter to other platforms that the official Flutter community has not been able to reach, such as Web/wechat mini program. MPFlutter is a grassroots project (not KPI driven).
– Try the preview version at mpflutter.com/
– Follow our code and development progress at GitHub github.com/mpflutter
– Please follow the wechat official account “MPFlutter Developer” for the latest information