Flutter - Widget Tree and Element Tree - GeeksforGeeks

14 May, 2021
As we know, the user interface of an application when it is designed in Flutter contains a set of widgets. So that means the whole application is set to be made out of widgets. A widget describes what the view of the app would look like in the given state. 
Now, as the user interface contains several widgets, those several widgets are combined to form a widget tree. Now, to each widget that the user creates, an element is created simultaneously by the flutter framework, so now these elements when combined will be called an element tree. 
So that means that the widget tree has all the widget configuration and the element tree has all rendered widgets on the screen. There is one more tree named render tree, but the user doesn’t have to interact with it. Render tree is basically a low-level layout, painting system that inherits from the render objects. You won’t need to inherit directly to the render tree, and you will be interacting with the widgets.
Now the widget tree can also be divided into 2 small trees depending on what widget the user has chosen for their code.
Stateless widget treeStateful widget tree
Stateless widget tree
Stateful widget tree
Stateless widget is the widget that is used by the user to create a non-dynamic application. A stateless widget is formed by a combination of several small widgets. Each widget that is created here will have a corresponding stateless element. So several widgets combined under stateless widgets will be called stateless widget trees and the corresponding elements will make an element tree. Flutter uses the createElement method to create the elements. Each element created will have a unique id assigned by the flutter back-end.
Following is the sample code:
Dart
class TextList extends StatelessWidget {  @override  Widget build(BuildContext context){    return Row(      children: <Widget>[        Icon(),        Text(),      ],    );  }}
Here in this code, we have created a simple class called TextList which extends the stateless widget, which contains several other widgets like row, icon, and text. For each widget in this widget tree, a stateless element is created and the combination of these elements makes it an element tree.
A stateful widget is a widget that is used by the user to create a dynamic application. The stateful widget also works similar to the stateless widget, but here when the framework calls the createElement method, a state object is created. The reason behind creating the state object is that as this has to be a dynamic application the states would change while keeping the previous state unharmed and enhancing the performance.
We make use of the setState method to set the new data values or to update the state objects.
setState ( ( ) {
   name = _newvalue;
});
Following is the example code:-
Dart
class _TextListState extend State<TextList> {  String note = 'Trip A';  void _onPressed() {    setState( () {      note = 'Trip B';    });  }      @override  Widget build (BuildContext xontext){    return Column(      children : <Widget> [        Icon();        Text('$note),        FlatButton(         onPressed : _onPressed,        ),      ],    );  }}
Here in this code, we have created _TextListState class that extends the state TextList. We have used the setState method because we have to keep the initial state in the element tree even after changing the state. 
Flutter-widgets
Picked
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Positioned Widget
Format Dates in Flutter
Flutter - Managing the MediaQuery Object
Flutter - BorderRadius Widget
Flutter - Padding Widget
Flutter - Card Widget
Flutter - Google Sign in UI and Authentication
Flutter - Fetching Data From the Internet
TextSpan Widget in Flutter
Flutter - Expanded Widget