Understanding the widget tree and element tree

Understanding the Widget tree and Element tree:

Widget tree :

Widget tree are the collection of different widgets that are use to build the application. Widget contain the instructions to create the UI and when you compose widgets 

together they create widget tree.

In flutter every thing is widgets mans that when the application is run it call the runApp() method .Basically we taking StatelessWidget as the argument and mounted as root element for the application.Then flutter framework processes through all the widgets and corresponding elements is mounted.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

debugShowCheckedModeBanner: false, 

home: MainPage());

  }

}

Element tree:

Element tree are the collection of the child widget like Icons,Text. Element tree are the reference of  widget tree.Each element in a element tree is unique.

Stateless Widget and Element tree:

A stateless widget has the configuration to create a stateless element. Each stateless widget has a corresponding stateless element.The Flutter framework calls the createElement method (create an instance), and the stateless element is created and mounted to the element tree. In other words, the Flutter framework makes a request from the widget to create an element and then mounts the element to the element tree.

Each element contains a reference back to the widget. The element calls the widget’s build method to check for children widgets, and each child widget (like an Icon or Text) creates its own element and is mounted to the element tree. This process results in two trees: the widget tree and the element tree. 

class JournalList extends StatelessWidget {  

@override  Widget build(BuildContext context) {    

    return Row(      

               children: <Widget>[        

                                      Icon(),        

                                     Text(),     

            ],    

      ); 

 } } 

Stateful Widget and Element tree:

A stateful widget has the configuration to create a stateful element. Each stateful widget has a corresponding stateful element. The Flutter framework calls the createElement method to create the stateful element, and the stateful element is mounted to the element tree. Since this is a stateful widget, the stateful element requests that the widget create a state object by calling the StatefulWidget class’s createState method. 

The stateful element now has a reference to the state object and the widget at the given location in the element tree. The stateful element calls the state object widget’s build method to check for child widgets, and each child widget creates its own element and is mounted to the element tree. 

This process results in two trees: the widget tree and the element tree. Note that if a child widget displaying the state (journal note) is a stateless widget like the Text widget, then the element created for this widget is a stateless element.

The state object maintains a reference to the widget (StatefulWidget class) and also handles the construction for the Text widget with the latest value.