About Flutter’s layered design

So regarding the Google tech talk about the flutter layers.

I decided to write a blog about what I’ve learnt from the video. Here is the link of the video if intrested.

From tops down, here’s the flutter frameworks layers,





1. Building on top of dart:ui

dart:ui layer is at the bottom of the flutter framework , which is a rendering framework to draw ui onto the screen.

If we were to build an app directly on top of dart:ui it would look like this.

dart:ui layer code

Our code would be just tedious code calculating the frame for each ui element for each frame. It would be extremely hard to debug or maintain.

Updating the code if you were to add a new ui element to the app would be a nightmare.

2. The Rendering layer

The rendering layer is built to solve the problem on the dart:ui layer.

It goes on top of the dart:ui and calculates all the underlying box frames for us so that we are saved from the tedious work of math calculations.

This is what the code look like using the rendering layer.

Rendering layer code

You can see that the form of the code is already a lot like the actual flutter code we build our apps.

The problem with this layer is that the code which build the render object tree and the code which maintains the state of it are separate, that it can easily get out of sync.

3. Widget layer

So here comes the widget layer to solve this problem. Widget layer is built on top of the rendering layer and it solves the problem of out of sync ui.

How is solves the problem is that instead of maintaining the state of the original tree, it builds a new tree of immutable widgets each time there’s an update.

When an update happens whether by user interaction or state change, the widget layer compares the element tree before and after the update and merely changes the part where it’s different.

So that it uses the old render object tree as much as possible.

Widget tree–Element tree–RenderObject tree in parallel

When state updates, the old widget tree is disconnected and new widget tree is created.

4. About State

to be continued…