About the author

E-moss, a programmer who reads and wanks dogs, works on iOS development. Major share and write technical articles, not on a regular basis to share reading notes, can also access to "the best" Git address: https://github.com/knowtheroot/KnowTheRoot_iOS, welcome to ask questions and discussion.Copy the code

The article directories

  • Flutter framework
  • Widget
  • Description of Flutter interface rendering
  • conclusion

preface

Current Hybrid development mode:

1. Native and Web interaction through WebView

2. In order to solve the problem of poor WebView performance, a class of frameworks represented by React Native return the final rendering work to the system. Although the UI construction logic like HTML+JS is also used, corresponding custom Native controls will be generated eventually. In order to make full use of native control relative to WebView’s higher rendering efficiency.

I. The framework of Flutter

The architecture of Flutter is divided into three layers:

  • Framework
  • Engine
  • Embedder

1.Framework

The Framework is implemented using DART and includes:

  • Material Design-style Widgets,Cupertino(for iOS) -style Widgets
  • The core code of this part is: the flutter package under the Flutter repository
  • IO, Async, UI (DART: UI library provides the interface between the Flutter framework and the engine) and other packages under sky_engine repository

Widgets: Can be understood as components.

2.Engine

Engine is implemented in C++, including:

  • Skia
  • Dart
  • Text

Skia is an open source two-dimensional graphics library that provides a common API for a variety of hardware and software platforms.

3.Embedder

Embedder is an Embedder layer. This includes rendering the Surface Settings, thread Settings, and plugins. From this we can see that the platform-dependent layer of Flutter is very low. Platforms (such as iOS) only provide a canvas, and all the remaining render related logic is inside Flutter, which makes it very cross-end consistent.

As you can see from the architecture diagram, rewrite a cross-platform UI framework from start to finish, including UI controls, rendering logic and even the development language. 1. The rendering engine relies on the cross-platform Skia graphics library to achieve, relying on the system only graphics drawing related interface, which can ensure the experience consistency of different platforms and different devices to the greatest extent; 2. Dart language, which supports AOTS, is used for logic processing and is much more efficient than JavaScript.

Second, the Widget

At present, the mainstream of the idea, all hope to decouple each UI control, slowly evolved the idea of componentalization.

Flutter controls fall into two main categories:

  • StatelessWidget
  • StatefulWidget

StatelessWidget

As the name implies, a StatelessWidget is a widget whose state is immutable. The initial state cannot be changed after it is set. If you need to change, you need to recreate it. The UI is rerendered when incoming data changes. The StatelessWidget is used to display static text or images.

StatefulWidget

The StatefulWidget rerenders the UI whenever incoming data and the class data change. Use the StatefulWidget if the control needs to be changed based on external data or user actions.

What is the State?

The concept of State comes from Facebook’s popular Web framework React. In the React style framework, control trees and their states are used to build the interface. When the State of a control changes, the framework is responsible for comparing the difference between the states before and after and updating the rendering results at the lowest cost.

How do widgets save state?

Flutter preserves State by introducing State. When the State changes, the node and the child’s Widget tree can be rebuilt to make UI changes. If the State needs to be changed actively, it needs to be triggered by setState() method. Simply changing data will not cause UI changes.

Description of Flutter interface rendering

The Rendering process of the Flutter interface is divided into three stages:

  • layout
  • draw
  • synthetic

Layout and drawing are done in the Flutter Framework and composition is done by the Engine. Detailed rendering principles will be explained in The Principles of Flutter Technology.

Four,

A comparison of Flutter and ReactNative

RN’s rendering mechanism is based on front-end framework considerations, and complex UI rendering relies on the overlay of multiple views. For example, rendering a complex ListView, each small control is a native view, and then combining and superimposing each other, when rolling to refresh, performance is a huge test.

ReactNative

  • Use Javascript development, need to learn React, high cost
  • Need JavaScript bridge, JS to Native conversion, performance loss
  • Access to native UI, frequent operation is prone to performance problems
  • Support online dynamic, can effectively avoid frequent version updates

Flutter

  • Developed with Dart, it can be directly compiled into Native code (easy to learn)
  • Built-in UI components and renderers, relying only on system-supplied Canvas (no bridge wear)
  • Online dynamics is not currently supported, currently supported by Android but not iOS