Tree of Flutter
- Widget Tree
- Element Tree
- Render Tree
The Element Tree and Render Tree are managed internally by Flutter,
and Flutter creates them through the build method based on the Widget Tree we made.
The Element Tree sits in the middle, mapping one-to-one to the Widget Tree and the Render Tree.
Widget Tree
The tree we implement through code
As a blueprint, it holds information about the UI, like the order and shape of what should be drawn on the screen.
It gets rebuilt fresh every time the build method is called.
Element Tree
It connects the Widget Tree and the Render Tree.
Every time a Widget is created, an Element is created too.
An Element holds information like the position, type, size, and background color of its corresponding Widget.
The Element points to the Widget, a concept similar to a Pointer.
Render Tree
The High Level system that actually draws on the screen
In the end, every element we see is the result of the Render Tree's work.
Update process
Say some widget has changed and Hot reload runs.
When Hot reload runs, the build method is called and every widget in the Widget Tree is rebuilt.
At this point the Element Tree isn't rebuilt, and it starts matching one-to-one with the newly created Widgets again.
Now, if only the changed parts need to be re-rendered, it passes that information to the Render Tree,
and the Render Tree redraws the widgets based on the information it received.
The Widgets themselves are created anew, but the cost and time of building Widgets is very small, and since the Element Tree isn't recreated and only the parts that need to change get rendered, it can guarantee a fast 60FPS.