Skip to content
Hallway
0:00 / 0:00

#flutter#widgettree#elementtree

Beginning Flutter - Understanding the Widget Tree and Element Tree

JediPixels

7.6K subscribers • 4 videos on Hallway

YouTube
  • Recommended by 2 people: 2 in engineering communities.
  • May be out of date. Uploaded 7 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

40K views7 years ago2 recommendations

Mobile developmentSoftware designFlutter and React NativeSoftware architecture

An introduction to how Flutter manages UI rendering using the widget tree, element tree, and render tree.

This video is an introduction to: - Understanding the Widget Tree and the Element Tree. - How the Flutter application itself is a widget. - Elements have a reference to the widget and are responsible for comparing the widget differences. - When you see the use of BuildContext objects, they are the Element objects. - There is a third tree called the render tree that is a low-level layout and painting system that inherits from the RenderObject. The RenderObject computes and implements the basic layout and paint protocols. - We'll take a look at the Stateless Widget and Element Tree. - The Stateful Widget and Element Tree. Looking for Updates: JediPixels.dev Beginning Flutter Book: amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119… Subscribe: youtube.com/channel/UCTvPs-zK7ykOZ-sVnNtp84w?sub_confirmatio… #flutter #dart #flutterdev #appdevelopment

Why it's here

2 people recommend this

What people say. Recommended as a clear explanation of Flutter's underlying tree architecture and how it compares to a virtual DOM.

u/Pixelredditin r/FlutterDev • Recommends

Beginning Flutter - Understanding the Widget Tree and Element Tree
18View on Reddit

u/albrnickin r/FlutterDev • Recommends

On “What is Flutter Web more akin to, Svelte or React/Vue?”

I'm not familiar with Svelte. But the UI itself is handled in a custom canvas on mobile (and probably Desktop?) Though, on the web, it is HTML and CSS. But the underlying logic is very similiar to a Virtual DOM. Each Widget is like a DOM Element. They store the hierarchy in several Trees, which remind me of a Virtual DOM. With those trees only changing when they detect a change, and only changing the bits that changed. Here is Google's official video on: link to this video And a shorter summary video by a 3rd party: link to this video It's these structures that help make Flutter so fast. :)
1View on Reddit