How to use the Flutter framework to develop and run small programs

Flutter is an excellent development framework. With Flutter, developers can freely use their creativity on iOS and Android platforms to build interactive and beautiful applications.

The Flutter product team revealed that the original intention of creating Flutter was to try to revolutionize application development: combining the iterative development model of the network with hardware-accelerated graphics rendering and pixel-level control, which was previously the patent of games. In the four years since Flutter 1.0 beta, it has gradually built on these foundations, adding new framework features and new widgets, deeper integration with the underlying platform, a rich package library, and many performance and tooling improvements.
insert image description here

What's new in Flutter 3.0

At the 2022 Google Dev Conference, as part of the I/O keynote speech, the main creative team officially launched Flutter 3.0. In general, Flutter 3.0 completes the roadmap from a mobile-centric to a multi-platform framework, providing support for macOS and Linux desktop applications, as well as improvements to Firebase integration, new productivity and performance features, and support for Apple Silicon .
insert image description here

Specifically, Flutter 3.0 adds stable support for macOS and Linux applications. Adding platform support requires more than just rendering pixels: it includes new input and interaction models, compilation and build support, accessibility and internationalization, and platform-specific integration. The goal is to give everyone the flexibility to take full advantage of the underlying operating system while sharing as much of the developer's choice of user interface and logic as possible.

On macOS, Intel and Apple Silicon are already supported, and universal binary support is provided, enabling applications to package executable files to run natively on both architectures. On Linux, Canonical and Google have partnered to provide a highly integrated, best-in-class option for development.

Flutter 3 also brings improvements to many fundamentals, improving performance, supporting Material You, and updating productivity.

Application of Flutter

As the Flutter development framework continues to mature, more and more people are starting to use it to build applications. To date, more than 500,000 apps have been built with Flutter. Analysis from research companies such as data.ai, as well as public evaluations, show that Flutter is used by customers in many segments: from social applications such as WeChat to financial and banking applications such as Betterment and Nubank; from commercial applications such as SHEIN and trip.com Applied to lifestyle apps like Fastic and Tabcorp; from companion apps like My BMW to public agencies like the Brazilian government.

At the same time, at the Flutter 3.0 conference, the R&D team released research data based on developers:

  • 91% of developers agree that Flutter reduces the time it takes to build and ship apps.
  • 85% of developers agree that Flutter makes their apps prettier than before.
  • 85% agree that Flutter enables their apps to be distributed on more platforms than before.

Flutter and applets

As a unique product of my country's technology research and development industry, small programs have developed rapidly in recent years due to their light weight, convenience, and high-quality experience, especially in the small programs of major companies such as Tencent, Ali, Baidu, and Byte. With the help of the development platform, the number of WeChat mini-programs alone exceeds 7 million, and the number of mini-program developers is 3-4 million. The scale is quite amazing.

The closest relationship between applets and Flutter is in rendering optimization. Let’s take a look at the whole framework first:
insert image description here
under this architecture, we use the LV-CPP of the Layout layer as the UI system processor of applets, and calculate the layout of UI information Then submit it to the abstract backend for rendering. LV-CPP is used as the framework of the applet and the middle layer of the renderer, focusing on the C++ layer to deal with complex features related to the Web. The rendering end can focus on converting elements into UI components based on specific protocols and interfaces, and finally draw them.

By combining Flutter and LV-CPP, we converge the implementation code on C++ and Dart, which further simplifies the framework maintenance cost for realizing cross-platform business development based on the applet technology stack.

Let's take a look at how each manufacturer develops:

JD.com: Exploring the Expansion of Flutter to the WeChat Mini Program

Jingdong launched the open source project of Flutter_mp. This framework mainly does two things:

1. It is necessary to generate the relevant applet wxml template file according to Flutter.

2. Collect the data required for wxml rendering and place it in the data field of the applet component.

flutter_mp is still in the early experimental stage, and many functions are still being explored and planned. It only supports basic widgets such as Center, Column, Container, Expanded, Image.asset, ListView, Row, and Text. It does not support custom widgets at the moment, and its own Flutter Code can only appear in the lib/main.dart file.

Meituan: Dynamic platform construction based on cross-platform framework Flutter

Both WeChat and Xianyu emphasize the cross-platform of Flutter, while Meituan emphasizes the dynamism of Flutter, and we know that Flutter does not support online dynamism, so Meituan’s sharing mainly revolves around logic layer dynamism and rendering layer dynamism to carry out.

Meituan presets a JSC module in the dynamization engine, that is, JsCore, which executes JavaScript through JSC to realize the dynamization of the logic layer, while the dynamization of the rendering layer is displayed through xml+css, and then parses to generate a layout tree and Finally, it is rendered through Flutter.

WeChat: WeChat client cross-platform practice based on small program technology stack

The WeChat applet first adopted the Webview rendering solution, and later adopted the React-Native-Like solution. Later, WeChat proposed a very bold idea: the upper layer still uses WXML+WXSS to represent, but the bottom layer uses the Flutter engine to render, and they felt that Platform Channel communication was inefficient, so they built a dart2cpp module to be responsible for communication. At present, WeChat will not give up WebView rendering, and the attempt is limited to some scenarios inside the WeChat client.

FinClip: Construction of cross-end development platform based on small program technology

As a small program container technology, FinClip can also be said to be a small program sandbox Runtime/Engine. It provides Runtime based on the browser kernel, adopts dynamic language (JS) and declarative View construction (XML), and is compatible with Internet mainstream small program technology. DSL framework based on Vue and react.

In fact, it does not conflict with Flutter, Reactive-Native, 100% Native or Framework technologies, just embed it, and individual small program development can still enjoy the achievements of React and other Web Frameworks, mate Frameworks, and DSL Frameworks

The FinClip applet container technology, which separates the view layer from the logic layer, also brings many benefits:

1. Facilitate data sharing and interaction between multiple applet pages. Having the same context throughout the lifecycle of an applet provides a familiar coding experience for developers with native application development backgrounds;

2. The separation and parallel implementation of Service and View can prevent JS execution from affecting or slowing down page rendering, which helps to improve rendering performance;

3. Because JS is executed in the Service layer, the DOM operated in JS will not affect the View layer, so the applet cannot manipulate the DOM structure, which also makes the performance of the applet better than the traditional H5.

insert image description here

FinClip provides the Flutter SDK, which supports the use of applets in the Flutter environment; to meet the effect of mixing Flutter and applets.

Guess you like

Origin blog.csdn.net/POHOU23/article/details/125622494
Recommended