What is an element in Flutter?

Issue

I'm having a hard time understanding what an element is in Flutter. From the doc: "An instantiation of a Widget at a particular location in the tree". . . . I guess now I have to ask, what is the tree.

At first, I thought the tree referred to the states of widgets, but StatelessWidget also has createElement, so this doesn't seem the case. Then, I thought that the tree referred to the parent/child relationship, but it is not clear to me. Finally, it sounds like an element is sort of like a snapshot of the widget at that particular time and location, but the associated methods don't seem to reflect that. Am I anywhere close?

Solution

Flutter creates a visual tree of Elements, which are like mutable copies of Widgets. You don't normally deal directly with Elements, the framework does.

So (a very simplified version of) your tree might look something like this:

MediaQuery 
-- Theme Data
---- Scaffold
------ AppBar
------ Body
--------- Column
----------- Text
----------- Text
----------- Row
------------- Button
------------- Button
------ FloatingActionButton

Those Texts may well be the same Widget being reused multiple times, but in the tree there are unique Elements.

Answered By - Dan Field