As developers we make our UI through widgets, but how do they end up on the screen? How do we get that smooth 120 frames per second? Let’s do a quick deep-dive in how the framework goes from the widgets we create to painting the pixels on the screen!
‘Everything’s a widget’, a common phrase in the land of Flutter development, and for the most part that’s true. However: if you dive a little deeper you’ll see that widgets actually convert to something else before they end up on the screen. The widget tree is well-known, but did you know that Flutter actually has 3 trees behind the scenes?
- A tree of widgets
- A tree of elements
- A tree of render objects
The first tree, the widget tree, is something we’re all familiar with, and for the most part that’s all you’ll be needing to do Flutter development. The other 2 trees though, the element tree and the render object tree, are being used under the hood. Your widget tree will be converted to a tree of elements, which in turn will be converted to a list of render objects. But what’s the function of each of these trees?
The widget tree is the tree we as developers will be working with. It’s basically a description, a blueprint of what we’d like to draw on the screen. Think of this part as the configuration of your UI.
