The Layer Cake

Next, with the help of the Elements in the element tree, Flutter will compare the first item in the new widget tree with the first item in the render tree, then the second item in the new widget tree with the second item in the render tree and so on.Change the container color to red..Nothing special here.Flutter will follow a basic rule here: check if the old and the new widgets are from the same type..If not, remove the Widget, the Element and the RenderObject from the tree (including subtrees) and create new objects..If they are from the same type, just update the configuration of the RenderObject to represent the new configuration of the widget and continue travelling down the tree.In our example, the SimpleApp widget is the same type as before and has the same configuration as the appropriate SimpleAppRender object, so nothing will change..The next item in the widget tree is the SimpleContainer widget but with a different color configuration..As the SimpleContainer still needs a SimpleContainerRender object in order to be drawn, Flutter just updates the color attribute on the SimpleContainerRender object and asks it for a redraw..The other objects will stay untouched.The state of the three trees after rebuilding the widget tree and updating the config of the RenderObjects..Notice that the Element and RenderObjects are still the same instances.This process is fast because Flutter is really good at creating those simple widgets which just represent the current configuration of the app..The ‘heavy’ objects will stay untouched until the corresponding widget type is removed from the widget tree..What happens if the type of a widget changes?The SimpleText got replaced by a SimpleButton.Again, Flutter will iterate over the newly built widget tree and compare the type of the widgets with the type of the RenderObjects in the render tree.The new widget tree..SimpleText, the corresponding Element and SimpleTextRender have been removed from the trees.Since the SimpleButton does not match the type of the Element at the position in the element tree, Flutter will remove the Element and corresponding SimpleTextRender from the two other trees..It then continues to traverse down the newly created widget tree and instantiates the appropriate Elements and RenderObjects.The final trees.And bingo!. More details

Leave a Reply