Understand the architecture
The frame structure of flutter is shown in the figure below:
Engine(C++) is the Engine(C++) layer, which contains Dart language, Skia Engine and Text Text Engine.
Skia is a library of 2D vector graphics processing functions, including font, coordinate transformation, and bitmap with efficient and concise performance. Not only for Google Chrome, the emerging Android open mobile platform also uses SKia as drawing processing, with OpenGL/ES and specific hardware features, enhance the effect of display
An Engine is the core component of a program or system developed on an electronic platform. With engines, developers can quickly build, lay out, or assist applications
On the upside, Foundation and Animation, Painting and Gestures are what I call the UI layer. This is part of the game that developers don’t touch and change. This content is used by the Rendering layer. The main function of Rendering layer is to determine the Widgets used by developers, call UI layer through algorithm logic, and finally call Skia, Text engine to draw, and display the final interface effect. If an update is involved in the interface, the change is done in the Rdndering layer, where the algorithm logic is computed and the update operation is performed. Of course, this part of the algorithm is the core content.
Everything is displayed in the form of an interface and goes through the same process. Pixel points -> interface formation -> GPU refresh frequency -> reaching the limit frequency of human eyes is enough smooth animation.
The core ideas
Write down what I think is the core idea as I understand it. After all, there are a hundred Hamlets in a hundred people’s eyes. As you can see from the architecture, the core of Flutter is drawing. Everything can be drawn. Of course, Flutter provides a lot of widgets. To go a little further, the pull back, draw, refresh algorithm is the core idea. So how does Flutter work? That brings us to Element. Element is the Rendering layer that is closely related to widgets. Look at the architecture to understand the general relationship between Rendering layer and widgets, so how they are connected is through Element. Widget creates an Element, and Element creates a renderObject to create powerful Rendering layers. If you look at any Widget, you’ll find these two methods
The renderObject is what implements the final layout and rendering, as well as the core of the algorithm. How it was laid out, drawn, calculated. It also involves relayoutBoundary, RepaintBoundary. After the page changes, the renderObject changes on the Rendering layer nodes are calculated and updated.
conclusion
As you can see for developers, the focus is on the Widget layer and you can use CustomPaint to draw your own requirements.