Element: Flutter Under the Hood

How Element Is Created?

Widget Creates Element

/// Creates a [StatelessElement] to manage this widget's location in the tree.
///
/// It is uncommon for subclasses to override this method.
@override
StatelessElement createElement() => StatelessElement(this);

/// Creates a [StatefulElement] to manage this widget's location in the tree.
///
/// It is uncommon for subclasses to override this method.
@override
StatefulElement createElement() => StatefulElement(this);

Element(Widget widget)
 : _widget = widget {
 // ... initialize
}

Element Tree

What Element Do?

Build Widgets

void performRebuild() {
  Widget? built;
  try {
    built = build();
  }
  try {
    _child = updateChild(_child, built, slot);
  }
}

// implementation by StatelessElement
@override
Widget build() => (widget as StatelessWidget).build(this);
// implementation by StatefulElement
@overrideWidget build() => state.build(this);

@override
Widget build(BuildContext context) {
  return MyPageWidget();
}

Optimize Build

/// Returns true if the element has been marked as needing rebuilding.
///

/// The flag is true when the element is first created and after
/// [markNeedsBuild] has been called. The flag is reset to false in the
/// [performRebuild] implementation.
bool get dirty => _dirty;
bool _dirty = true;

/// Marks the element as dirty and adds it to the global list of widgets to
/// rebuild in the next frame.
///
/// Since it is inefficient to build an element twice in one frame,
/// applications and widgets should be structured so as to only mark
/// widgets dirty during event handlers before the frame begins, not during
/// the build itself.
void markNeedsBuild() {
  if (_lifecycleState != _ElementLifecycle.active) {
    return;
  }
  if (dirty) {
    return;
  }
  _dirty = true;
  owner!.scheduleBuildFor(this);
}

void setState(VoidCallback fn) {
  final Object? result = fn() as dynamic;
  _element!.markNeedsBuild();
}

if (hasSameSuperclass && child.widget == newWidget) {
  newChild = child;
} else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
  final bool isTimelineTracked = !kReleaseMode && _isProfileBuildsEnabledFor(newWidget);
  child.update(newWidget);
  newChild = child;
} else {
  deactivateChild(child);
  newChild = inflateWidget(newWidget, newSlot);
}

static bool canUpdate(Widget oldWidget, Widget newWidget) {
  return oldWidget.runtimeType == newWidget.runtimeType
      && oldWidget.key == newWidget.key;
}

Find Ancestor Widget

// implementation by StatelessElement
@override
Widget build() => (widget as StatelessWidget).build(this);

@override
Widget build(BuildContext context) {
  return MyPage();
}

abstract class Element extends DiagnosticableTree implements BuildContext {
}

A handle to the location of a widget in the widget tree.

static NavigatorState of(
  BuildContext context, {
  bool rootNavigator = false,
}) {
  NavigatorState? navigator;

  if (context is StatefulElement && context.state is NavigatorState) {
    navigator = context.state as NavigatorState;
  }
  if (rootNavigator) {
    navigator = context.findRootAncestorStateOfType<NavigatorState>() ?? navigator;
  } else {
    navigator = navigator ?? context.findAncestorStateOfType<NavigatorState>();
  }

  return navigator!;
}

@override
T? findAncestorStateOfType<T extends State<StatefulWidget>>() {
  Element? ancestor = _parent;
  while (ancestor != null) {
    if (ancestor is StatefulElement && ancestor.state is T) {
      break;
    }
    ancestor = ancestor._parent;
  }
  final StatefulElement? statefulAncestor = ancestor as StatefulElement?;
  return statefulAncestor?.state as T?;
}

@override
InheritedElement? getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
  final InheritedElement? ancestor = _inheritedElements == null ? null : _inheritedElements![T];
  return ancestor;
}

Conclusion