Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Flutter – Widget Tree and Element Tree

  • Last Updated : 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.

  1. Stateless widget tree
  2. Stateful widget tree

STATELESS WIDGET AND ELEMENT 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.

STATEFUL WIDGET AND 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. 




My Personal Notes arrow_drop_up
Recommended Articles
Page :