preface
-
Flutter, a new cross-platform mobile client UI development framework developed by Google, is being used by more and more developers and organizations, including Alibaba’s Xianyu and Tencent’s wechat.
-
Today, I will present a comprehensive & detailed Study Guide to Flutter **. I hope you will enjoy it.
directory
1. Introduction
- Definition: AN open source MOBILE client UI development framework (SDK) produced by Google
- What it does: Quickly build high-quality, high-performance native user interfaces on Both Android and iOS with one set of code
- Development language: Dart language (high efficiency, high performance, etc.)
Characteristics of 2.
- The main features of Flutter include rendering using its own high-performance rendering engine & the Dart programming language
- Detailed introduction is as follows:
2.1 High-performance rendering engine
- The UI rendering of Flutter uses its own high-performance rendering engine (no WebView & native controls).
- Benefits: UI consistency on Android and iOS & avoiding restrictions and maintenance costs associated with native controls dependency.
- Composition: C, C ++, Dart, Skia (2D rendering engine), described as follows:
Special attention:
- Flutter relies on the Flutter Engine virtual machine to run on iOS and Android
- The Flutter Engine is written in C/C++ = low delay input + high frame rate
- Developers can interact internally with the Flutter framework and API
Here, a brief introduction to Flutter’s 2D rendering engine: Skia
2.2 the Dart language
- The Dart language starts with two concepts: JIT and AOT. There are two main ways to run the program: static compilation & dynamic compilation, as follows:
Special attention:
- JIT and AOT refer to how programs are run and are not strongly dependent on the programming language.
- Some languages can be jIT-aOT run together, such as Java, which compiles to intermediate bytecode on first execution and then executes bytecode directly on subsequent execution
- The standard for distinguishing AOT is whether code needs to be compiled before it can be executed. If it needs to be compiled, whether it is bytecode or machine code, it belongs to AOT
Dart language features
- The Dart language features high development efficiency, high performance, and type safety
- Details are as follows:
3. Principle analysis
3.1 Frame Structure
-
The Flutter FrameWork is mainly divided into two layers: FrameWork layer and Engine layer, as shown in the following figure:
-
Note: Development, mainly based on the Framework layer; At runtime, it runs on Engine. The details of each layer are as follows:
3.2 Principle Overview
-
Development is mainly based on the Framework layer; At runtime, it runs on Engine
-
Engine is a standalone vm that ADAPTS to Flutter and provides cross-platform support. Because of its existence, Flutter does not use native controls of mobile systems. Instead, Flutter uses its own Engine to draw widgets (the display unit of Flutter). Dart code is native to the platform compiled via AOT, so the Flutter can communicate directly with the platform without the need for a JS engine bridge.
-
The only thing that Flutter requires is a canvas to draw the UI.
-
When compiling, the details are as follows:
3.3 about the widget
The concept of Flutter: “Everything is a Widget”. Widgets are the basic building blocks of the USER interface of the Flutter application and have the following features:
- It is a unified object model with consistency, unlike other frameworks that separate views, controllers, layouts, and other properties. More efficient when updating widgets
- Immutable, supports only one frame, and does not update directly on each frame. To update, you must use the state of the Widget. The core features of stateless and stateful widgets are the same; each frame is rebuilt;
- There is a State object for storing State data & recovery across frames
Characteristics of 4.
- Flutter is cross-platform, efficient and high-performance
- Specific instructions are as follows:
4.1 Cross-platform & high development efficiency
Flutter works by using the same rendering engine, framework and widgets described above to build both iOS and Android apps with a single set of code, making Flutter cross-platform and ultimately more efficient
4.2 the high performance
- Reason 1: Render with its own high-performance rendering engine
- Cause 2: The language features of the Dart language
- Reason 3: Characteristics of compilation process, as follows:
5. Compare
- The essence of cross-platform development is to increase code reuse, reduce the workload of different platform adaptation & improve development efficiency.
- Currently, the mainstream cross-platform development frameworks include React-Native, Weex, and Flutter mentioned in this article. Next, I will briefly introduce React-Native and Weex, and then compare them.
5.1 the React – Native
-
The introduction is produced by Facebook and uses JavaScript, a JSCore engine, and a cross-platform framework with native rendering
-
The implementation principle is to write JavaScript language codes and invoke Native components through the React Native middle layer to finally realize corresponding functions. The function of the control written in the JS side is similar to that of the key value in Map, corresponding to the corresponding control in the Native side (such as the label corresponding to the ViewGroup control in Android). The JS end will combine Dom through multiple keys, and finally send it to the Native end for parsing, and finally render the control of the Native end.
-
The React Native architecture is implemented in three layers. The most important is the intermediate adaptation layer implemented by C++, which mainly encapsulates JavaScriptCore for JS parsing, and finally realizes the two-way communication interaction between JS end and native end. React Native runs in JavaScriptCore. (Use built-in javascriptCore on iOS and jSC. so on Android)
5.2 Weex
-
The introduction is produced by Alibaba, using JavaScript language, JS V8 engine and cross-platform framework via native rendering
-
The implementation principle is similar to that of React-Native. The JS side will combine Dom through multiple keys, and then send it to the Native side for parsing, and finally render the control of the Native side. However, the differences are as follows: Weex can cross the three terminals: Android, iOS, and Web. The reason is that during the development process, the code mode, compilation process, template components, data binding, and life cycle are the same. The difference is that the parsing methods of Virtual DOM on the Web and Native terminals are different.
-
Implementation framework The WEEX architecture consists of the following three parts:
5.3 Comparison of the Three
Note: For performance comparison, Flutter should theoretically be closest to the original performance and the best. However, there is no obvious difference in current practical application and experience. Further verification is required.
6. Learning methods & materials
- The best way to learn about flutter is to read the resources on the Flutter website. It is also the place to learn about the latest flutter developments
- Flutter Chinese community: FlutterChina. Club is the largest Flutter Chinese resource community, providing Flutter official website document translation, open source projects & cases and other learning resources
- Stackoverflow.com: Stackoverflow.com/ is the most active Flutter q&A community where members of the Flutter development team often answer questions
- Source: flutter. Dev/docs/develo… The source code for the Flutter SDK has the following features: Open source, examples & detailed comments. Gallery is the official Flutter example APP. Its source code is found in the “Examples” folder of the Flutter source code
7. To summarize
- This article gives a comprehensive introduction to Flutter learning
- In my upcoming articles, I will continue to explain Flutter, including its syntax and practical application. For those who are interested, please follow me on my blog: Carson_Ho’s Android blog