Element tree

Learn that the element tree bridges widget and render trees.

Element tree

The Element tree is the bridge between the widget tree and the render tree. For each widget an Element is created; the element mounts the widget, and holds state and context. Even though widgets are recreated on every rebuild, elements are kept and only updated.

// For each StatelessWidget an Element is created
element.update(newWidget);

mount and update

mount is the first insertion of the element into the tree; update is the refresh of an existing element with a new widget. Because elements are kept, rebuild is cheap: only update is called.

Exercise Define a StatelessWidget

Define MyWidget as a StatelessWidget. Its build method returns Container(child: Text('Selam')). In main, take a const MyWidget() instance and print its runtimeType.

Show example solution

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(child: const Text('Selam'));
  }
}

void main() {
  final widget = const MyWidget();
  print(widget.runtimeType);
}

Test yourself

What does the Element tree bridge?
- Memory and disk
- State and BuildContext
- Two widgets
- Widget tree and render tree
Show answer

Widget tree and render tree — The Element tree is the intermediate layer that connects the widget tree (abstract definition) to the render tree (drawing); one element is created per widget.

Update the element

element.____(newWidget);

Show answer

element.update(newWidget);

Element tree matches

Element

Widget-render binder
mount

First insertion to tree
update

Update when widget changes
BuildContext

The element itself

Next lesson: Render tree

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies