This time, WE will share some basic technologies of Flutter, including:

  1. The advantage of Flutter
  2. Two powerful tools of Flutter
  3. Flutter rendering

The advantage of Flutter

Currently, popular cross-platform technologies include H5, React Native, and later Flutter. The value of a cross-platform technology depends on acceptable page performance and efficient development.

Page performance

In terms of page performance, H5 page performance is mediocre, depending on the browser performance, for complex animation and interaction is a bit inadequate.

React Native has better performance than H5, because it directly renders pages through the client, which is much faster than WebView. Although the performance of the product is within the acceptable range, it still has performance shortcomings. Communication between JS and Native, event monitoring of pages, and rendering of complex animations all present certain performance challenges.

In order to solve the performance problems existing in H5 and RN, the self-drawing engine technology solution represented by Flutter came into being. Flutter draws its own graphical interface through Skia, avoiding frequent communication with native, and ensuring the performance and dual-terminal unity.

The efficient development

H5 and RN are developed using JavaScript, which are very friendly to the front-end. Moreover, the JavaScripe community is rich in resources, with low learning and development costs, and dynamic and hot update can be achieved.

Flutter uses Dart as the development language, which has some learning costs and is not as rich as JavaScript on the technology stack. Dart is in JIT mode in the development environment, avoiding recompilation for every change, and AOT mode in production, generating efficient ARM code, which JavaScript does not have, while also enabling efficient development.

Hot update

When bugs occur in the APP, traditional clients can only let users update the APP to fix bugs. Using hot update technology correctly, bugs can be fixed online. RN benefits from JavaScript being hot updated, whereas Dart is a static language that can’t be hot updated by itself, but it can be hot updated by special means.

Two powerful tools of Flutter

Dart is the only Flutter development language. Google chose Dart as the Flutter development language for a certain reason. The performance of Flutter cannot be achieved without its excellent architectural design.

Dart

Dart is almost as fast as JavaScript in JIT mode, but Dart supports AOT mode, which JavaScript does not. Let’s look at what JIT and AOT are.

Currently, program compilation has two running modes: static compilation and dynamic interpretation. Static compilation is all translated into machine code before running. This type is called AOT, that is, ahead of time compilation. Interpretation execution, on the other hand, is run sentence by sentence as it is translated, called JIT, or just-in-time compilation.

Dart has both JIT and AOT. In the development phase, JIT mode can be used to quickly change, saving development time. In the release phase, AOT generation of ARM ensures performance. Dart was developed by members of the Chrome team, who have optimized the memory allocation of the JavaScript engine. Dart is believed to be able to meet daily needs. Dart is also a type-safe language that supports static type detection to detect type errors and troubleshoot potential problems during development.

Flutter architecture

Flutter Framework

The Flutter Framework is a pure Dart implementation SDK that implements a set of basic libraries from the bottom up:

  • The bottom two layers (Foundation and Animation, Painting, and Gestures) are in the DART: UI package of Flutter, which is the underlying UI library of Flutter
    • Foundation, at the lowest level, mainly defines the underlying utility classes and methods for use by other layers
    • Animation: related classes of Animation, including tween Animation, etc
    • Painting: Encapsulates the drawing interface provided by the Flutter Engine
    • Gesutre: Provides gesture event passing and event response
  • Rendering: is an abstract layout layer, which relies on the DART UI layer. The Rendering layer builds a UI tree, and when the UI tree changes, the Rendering layer uses the DIff algorithm to calculate the changes, update the UI tree, and draw it on the screen
  • The Wigets layer is a library of basic components that Flutter provides, available in both Meterial and Cupertino styles

Engine

Engine is a pure C++ implementation SDK that includes the Skia Engine, the Dart runtime, the text typesetting Engine, and more, where the drawing logic is really implemented

Embedder

Embedder is an operating system Embedder layer that provides code for mobile and desktop operating systems to execute Flutter applications. Embedder includes feature embeddings for Surface Settings, thread management, and platform plug-ins. There are not many Flutter platform-related features, resulting in low maintenance cost for cross-segment consistency.

Apply colours to a drawing

Flutter is a component that focuses on a cross-platform UI, so layout and drawing are its core responsibilities.

When the user sees an image, the CPU is responsible for layout calculation, bitmap decoding, etc., and the data is packed and submitted to the GPU. The GPU is responsible for vertex calculation, chip calculation, and raster rendering to the frame cache. The display will switch the frame cache and present the rendered data to the user. The operating system controls a vSYNC signal, and for a screen of 60 frames /1 second, it typically sends a signal of 1/60ms to complete CPU and GPU work within the signal, and the user can see a smooth page, instead, the user can see a sluggish or even stuttering page.

Flutter rendering is divided into three main steps:

  • Layout: Calculates the position and size of page elements
  • Draw: Render page elements
  • Composition: To combine page tuples according to rules

layout

The layout of Flutter uses depth-first traversal of the render UI tree. For example, the Stack relies on RenderStack’s perfromLayout method for the actual layout:

// Pseudocode void performLayout() {..... while (child ! = null) { ... LayoutPositionedChild (child,...) . Replaces the child = / / use the child's brother childParentData. NextSibling; }}Copy the code

The data flow is transmitted from the top down to the bottom, and the data flow is returned to the parent node in turn by calculating its own size according to the constraints through sequential traversal. In the whole process, the location information is controlled by the parent node, while the child node does not care about its own position and only needs to calculate its own size, as shown in the figure below:

In the process of Flutter layout, in order to prevent the change of child nodes, the whole UI tree needs to be rearranged. Relayout Boundary is added to mark the parts that need to be redrawn by Relayout Boundary to avoid other nodes being polluted and trigger reconstruction:

A cache is added to Flutter to improve layout performance. In Flutter, every Element has a key. The key value is shifted and only different parts of the key are refreshed when the subtree is rebuilt.

After confirming the location and size of the Widget, it’s time to draw.

draw

Flutter uses a platform-independent, self-drawing engine called Skia. Chrome and Android use Skia as their drawing engine, but iOS does not. Therefore, iOS needs to pack Skia into an IPA package, which is larger than Android.

The existence of Skia benefits Flutter:

  • The rendering capability of the underlying Flutter has been unified, eliminating the need for two-end adaptation
  • Render UI efficiently through OpenGL

At the end of the layout, each node in the UI tree has a definite position and size. Flutter draws all elements onto different layers. The drawing process is also depth-first traversal, drawing the parent node first and then the child node. At the same time, there is also a Repaint Boundary, which can avoid global drawing and achieve local drawing to improve drawing performance.

conclusion

There are still many things to learn about Flutter and many things to describe. However, due to space and time problems, I will share them here for the time being. If there is anything inappropriate described in Flutter, please correct me.