Flutter’s 3 Tree Architecture. A quick overview

The complete Flutter framework is designed with 3 Tree Architecture as Widget, Element, and RenderObject Tree respectively. Let’s run through a quick guide to understanding these architectures.

Let’s begin

Since, the first release of the Flutter framework. The direct focus was to improve the User interface experience, and app performance, a pivotal task for the Flutter team. Let’s go through them one by one.

1- Widget Tree

A Widget Tree is all about the Widgets Layout Structure present in the State. As per this statement “Almost everything in Flutter is a Widget”, so for every UI that’s been created by a developer contains a long list of Widgets that forms the Widget Tree.

Secondly, this Tree is subdivided into another 2 categories,

Stateless Widget — for Static App

Stateful Widget — for Dynamic App

2- Element Tree

For each Widget that’s been created by the developer, an element is simultaneously created with it, and upon its formation, it actually forms the Element Tree.

3- RenderObject Tree

RenderObject deals with Painting the Layout on the screen and it is inherited from the RenderObject when the Element Tree is created. At this phase, you need to tackle with the Widget Tree and not the Render one. When you modify the UI, this Tree is called by the Flutter framework only when necessary.

Here’s A picture that covers all the concepts

Image from https://docs.flutter.dev/

Viewing Widget Tree

Run your Application via debug mode and go to Flutter Inspector Tab. You will find something like this,

Image from https://docs.flutter.dev/

Here, this article comes to the conclusion.

That’s all!

If you found this article helpful then 👏 and be sure to follow me:)

If you still face any difficulty you can reach out to the following

[embed]Mustafa Tahir Assalam O Alaikum WhatsUp Guys! This Channel will provide content on One of the most Emerging Technology frameworks i.e…www.youtube.com

[embed]mustafatahirhussein - Overview Enthusiastic Computer Scientist. Flutter Mobile Software Engineer. 😉 Flutter Engineer Find Flutter Videos on Youtube…github.com