1. Introduction

The Flutter is a high-performance, cross-platform UI framework built by Google. It gives developers an easy and efficient way to build and deploy cross-platform, high-performance mobile applications; Provide users with a beautiful, platform-free app experience. How did Flutter do this? What is the frame structure? Next, I will write a series of articles analyzing the framework layer of Flutter and the various dark technologies used in the framework of the Flutter in combination with the source code. This article, the first in a series, provides an overview of the Flutter framework.

2. Architecture of Flutter

Flutter is designed to be an extensible, layered system. It contains a series of independent libraries that depend on its underlying layer. See the diagram below.

Each component in the Framework layer is optional and replaceable. From the diagram above, the Flutter system can be divided into three layers. The Framework at the top, the Engine at the middle, and the Embedder at the bottom.

  • Framework: The Framework layer is a responsive Framework implemented purely in the DART language, and is typically used by developers to interact with the Flutter system.
  • Engine: the Engine layer, implemented mostly in C++, is the core of the Flutter system. The engine provides a set of underlying implementations of the Core Flutter API, such as graphics (via Skia), text layouts, files, etc., which are Bridges between the framework and the system (Andoird/iOS).
  • Embedder: the Embedder layer is basically implemented in the language of the platform, such as Java and C++ on Android; In iOS it is implemented in Objective-C/ objective-C ++. The embedding layer provides the portal through which the Flutter system accesses services provided by the underlying system, such as input methods, drawing surface, etc.

The Framework is the main focus of this series of articles. From bottom to top, it mainly includes:

  • Foundational and basic services, such as Animation, Painting, and Gestures, are designed to facilitate the abstraction of the base module by invoking the upper layer.
  • The Rendering layer provides abstract components for processing layers. With this layer, you can build a tree of drawable objects. You can manipulate these objects dynamically, and the tree can automatically update the tree based on your changes.
  • The Widgets layer is an abstraction of a component. Each Render object has a corresponding Widget object. In addition, the Widgets layer allows you to define composite components that you can reuse. At the same time, this layer introduces the responsive programming model.
  • The Material and Cupertino libraries provide a range of Material and iOS design style components.

3. Comparison of different cross-platform technologies

There are many articles comparing different cross-platform technologies, such as the introduction of mobile development technology in the Flutter combat. In this article, we will briefly look at the features, pros and cons of the different cross-platform technologies, and then explain why The performance of Flutter is comparable to that of native applications. At present, there are H5+ native, JavaScript+ native rendering, drawing UI+ native. The comparison of the three cross-platform technologies is as follows.

Technical types UI rendering performance Development efficiency dynamic Framework on behalf of
H5 + native The WebView rendering general high support Cordova, Ionic
JavaScript+ native rendering Native control rendering good high support RN, Weex
Self drawn UI+ native Built-in engine render Very good Flutter is high, QT is low Not supported by default QT, Flutter

The biggest advantage of the Flutter, as you can see, is its excellent performance. According to Google, the performance is comparable to the original. This can be seen in the following structural diagram.

Native application is drawn by its framework directly through Skia and calls GPU. However, for JavaScript+ native rendering cross-platform technology such as RN, its framework needs to first call native framework, then call Skia through native framework, and finally call GPU for drawing. As a result, its invocation step is one more layer than the native, and theoretically its drawing performance will be worse than the native. However, Flutter is different. Because the application of Flutter is also drawn by the framework directly via Skia calling the GPU, as long as the performance of the framework is comparable to that of the native framework, the drawing performance of the framework will be comparable to that of the native framework. Not only that, but because Skia comes with Flutter, it’s easy to upgrade, whereas Android is relatively slow to upgrade, so if Flutter uses the higher performance Skia library, its drawing performance may even exceed that of the native.

4. Summary

This paper mainly introduces the Framework system of Flutter, especially the Framework layer structure of Flutter. The performance of Flutter was compared with that of other cross-platform technologies, and the performance of Flutter was compared with that of native applications.

4. 5. Smart Car

Framework Analysis of the Flutter (2) — Element Flutter framework Analysis (4) — RenderObject Flutter Framework Analysis (5) — Widget, Element, Element RenderObject Tree Flutter framework analysis (6) -Constraint Flutter framework Analysis (7) -relayoutBoundary Flutter Framework Analysis (8) -Platform Channel Flutter framework Analysis – Parent Data Flutter framework Analysis -InheritedWidget