The final output of the Flutter Pipeline is something called the "layer tree". The layer tree is the roadmap used by the Flutter engine to paint all the pixels in a Flutter UI.

You may have thought that Widgets painted the UI, or perhaps RenderObjects, but neither of those objects directly control the pixels on the screen. In fact, none of the Dart code in a Flutter UI directly controls pixel colors. Instead, all the Widgets, Elements, and RenderObjects work together to create the layer tree, which represents what you want to be painted to the screen. Only the Flutter engine directly paints the pixels on the screen.

Painting with layers

To appreciate the role of Layers in Flutter code, it's helpful to see that you can paint the screen using nothing but Layers.

The following example manually assembles a Layer tree to paint the screen.

TODO: Show minimal code to paint something directly with a layer tree

final rootLayer = Layer();
final sceneBuilder = SceneBuilder();

rootLayer.addToScene(screneBuilder);
final scene = screenBuilder.build();

final flutterView = FlutterView();
flutterView.render(scene);

Why layers aren't enough

Layers tell the Flutter engine what to paint to the screen. Therefore, the layer tree always forms the foundation of any painting that takes place in Flutter.

Why do we need anything in Flutter other than Layers?

We need structures in addition to Layers because painting user interfaces with Layers is frustrating, and because uesr interfaces aren't just paintings.

Layer frustrations

Layers make it possible to paint pixels, but they don't make it easy.

TODO: describe how changing paintings requires adding and removing layers from the tree, but we want to mutate objects to make changes. So a single RenderObject can own multiple layers and re-organize them.

Beyond painting

User interfaces aren't just pretty paintings. They process mouse input, gesture input, and text input. They move focus between visual components that can accept input. And, they publish information to screen readers. Layers have nothing to say about these behaviors. Therefore, other structures are needed to implement these behaviors.

In Flutter, the focus tree routes text and keyboard input, the semantics tree collects information for screen readers, and the render tree routes mouse and gesture input.

All of these trees work together, within the Flutter Pipeline to implement Flutter user interfaces.