Hello, welcome attention to my column herein, this is the third series of about Flutter, Flutter introduced beginning from simple, step by step take you into the world of Flutter. You have some of the best mobile development experience, if not do not worry, at the bottom of my columns give me a message, I will do my best to answer you.
Last article we introduced the use Flutter development of the first cross-platform application, I believe we certainly impressive, this article describes the overall architecture Flutter platform.
A core principle
Columns have mentioned before, Flutter of SDK includes a modern responsive framework, a 2D rendering engine, ready-made widget and development tools. These components can help you quickly design, build, test, and debug applications.
Everything Widget
in Flutter, all the interface elements are all Widget, whether View Ye Hao, Ye Hao container, forms or just the layout Ye Hao, all Wiget!
The combination is greater than the inheritance
then again, in Flutter, all the interface elements are all Widget. No matter how complex is made up of numerous sub Widget Widget. You can choose any combination to assemble into a powerful Widget Widget.
Frame layered
Flutter is a hierarchical frame structure, each layer builds on the previous layer.
II. Overall architecture
Engine Layer
Flutter engine layer consists of three parts Skia / Dart / Text, which use a C ++ development.
Skia
Skia is a 2D vector graphics library, contains fonts, coordinate conversion, and bitmaps are highly efficient and concise performance. Not only for Google Chrome browser, the emerging Android open mobile platform skia also used as a drawing process with OpenGL / ES and specific hardware features, strengthening effect display.
Dart
Dart Engine layer comprises Dart runtime environment and garbage collection (GC), and a JIT (Just In Time).
Text
text rendering using Render libtxt library implementation of the text.
Framework layer
Flutter frame layer is implemented by Dart, simply divided into four parts, respectively from the bottom dart: ui layer / Rendering layer / Widgets layer Material (Cupertino) layer.
dart: ui
provides an interface between the frame and the engine Flutter layer.
Rendering
Rendering / Animation / gesture processing
Widgets
text / picture / button control base
Material / Cupertino
Prefabricated system Android / iOS style controls.
These levels provides a variety of options for building applications. Manner using a custom application can build all the features of the frame, or may use the control Widget for the UI layer. Can be used directly Widget Flutter provided can also customize a variety of Widget. If the upper realization does not meet your requirements, you can directly use the lower-level functions to customize.
Three .Flutter frame advantage
fast
Flutter really fast, its birth drawing a lot of advantages over other platforms.
Take UI rendering layer, all the elements are Widget, and even the page jump all Widget, so whether it is development cycles, difficulty developing or have become very simple for developers to quality requirements, not because the Activity life period ends lead to memory overflow and so on. You can see all of the interface counted as a View in Android, there is no concept of hierarchy, thus rendering speed is very fast with a developer debugging tools.
Further Flutter also very special thread, and is significantly different Java Dart "Thread" (an Isolate) is not shared memory, each stack (Heap) and stack (Stack) are isolated from each other through message channel to communication. So, Dart competition and the problem of data synchronization state variable does not exist, the entire Flutter Framework Widget rendering process runs in a isolate, call the dart in the code: when ui library that provides dart: ui library Native Binding achieve. The runtime also controls the transmission signal VSync, filled GPU data, and is also responsible to transfer the code to the client in the event of the runtime.
A set of code that can be run in two iOS and Android platform, the future will support the new operating system and Google ChromeOS, and even JS can be directly converted.
After Flutter overall architecture has been introduced over, I believe reading this article, you have a better understanding of Flutter, and the next article I will introduce the basic building Flutter UI, including the theme, Tab, custom fonts, drawers, how to refresh the UI and many more.