CODEWITHSUNDEEP
flutter
richalot
richalot

Reputation: 4821

What is an element in Flutter?

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?

Upvotes: 17

Views: 9607

Answers (4)

Henry Tan
Henry Tan

Reputation: 21

In fact the answer is already in what you have recited, an element is an instantiation of a widget. In terms of OOP, you first create classes and then instantiate the classes into objects; in Flutter, widgets are classes, here Flutter has created standard classes for you and you can also customise the standard classes by configuring the widgets, but you don't need to create objects from the class(widget) by yourself, Flutter does it for you during compiletime and runtime. What you see on screen are objects(called 'element') created from your widgets, you can have many elements created from one widget. You use build() method to put a widget(class) into effect, and after that the corresponding elements are built by Flutter engine and inserted into the screen. The build() method is the major mechanism that you can use to create changes on the screen, inside build() method you can reconfigure your widget put it into effect via calling the build().

Upvotes: 2

Shubhamhackz
Shubhamhackz

Reputation: 7973

In Flutter widget is the configuration of the UI, the main class which represents the element or UI displayed on the screen is Element. i.e Widget is actually the configuration data of Element and the Widget tree is actually a configuration tree, for the Element tree which is automatically generated whenever we create a widget tree.

More Info here - https://api.flutter.dev/flutter/widgets/Element-class.html

Upvotes: 5

Vinoth
Vinoth

Reputation: 9734

Flutter creates element for widget(including child widgets) it's displayed on the screen and it has a reference to the widget. Flutter framework creates the element tree which represents the rendered widget on the screen. An Element represents the use of a widget to configure a specific location in the tree. The element can change if the parent widget rebuilds and creates a new widget for this location. Element(mutable property) are created by createElement() method. The framework calls mount method to add the newly created element to the tree at a given slot in a given parent.

For more info, see this documentation

enter image description here

Upvotes: 7

Dan Field
Dan Field

Reputation: 21651

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.

Upvotes: 14

Related Questions