The Element Tree

Photo by Todd Quackenbush on Unsplash

We spoke about how a widget tree is just basically a tree of widget, easy right ? now what is an element tree ? list of element ? that might be correct but when it comes to an element tree, there is a lot to unwrap, why do we need the element tree ? how is is it created ?

Element trees are “exact copy” of widget trees, a Text() widget creates a type of Text() element, an Icon() widget creates a type of Icon() element, going by this logic, the element tree should basically consist of exact sample of a widget tree, but that’s not the entire case.

Element trees could be a carbon copy of a widget tree if the possibility of “mutability” is stripped away, but no, mutability changes things here, it opens a whole new world for us, without mutability, your shiny button text value won’t change from “Continue” to a “CircularProgressIndicator” when clicked, being unable to achieve this would suck, wouldn’t it ?

Without mutability, your ‘Continue’ button’s stuck forever, no fancy spinner to save the day. Lame, right?

Photo by hayleigh b on Unsplash

Therefore, it isn’t exactly correct to say [Element trees are “exact copy” of widget trees].

Now lets dive into the mutability shenanigans, what even is mutability and what’s it beef with our beloved trees in flutter.

So here is the thing, whenever you write cute little code [widgets], flutter runs an important function

createElement()

This function as its name implies, creates element, but here is how it starts, whenever you run your app either one of these functions, depending on whether you run an hot restart, hot reload, setState(), or some type of provider logic, they invoke the createElement() whose job is to create an Element instance for every widget it encounters.

build() or runApp()

You might think, wouldn’t it be computationally expensive to run the createElement() every single time, and yes it would, but flutter doesnt trigger the function every single time.

Ok, but how and when does flutter run createElement() to render the change of my cute little button text that says “Continue” to a “CircularProgressIndicator” when clicked ??

Here is the Flow

Photo by Robert Lukeman on Unsplash

Initial Build → Rebuild → Comparison

Initial Build — createElement is called, i mean its only logical to have an element tree when your app runs for the first time, at this point an element (“copy” of a widget), is being assigned a Key.

Keys are like IDs — Flutter uses them to spot who’s who.

Rebuild — Typically triggered by a setState() you added to your button, flutter runs the build(), which creates a new widget tree(each of these widget also comes with a Key)

Comparison — Yeah, you guessed right, the new Key is compared to the old one, if they are the same, nothing changes, if not, the createElement(), is called to render the “CircularProgressIndicator”.

Ladies and gentlemen, this process is called the DIFFING ALGORITHM.

Photo by Ashkan Forouzani on Unsplash