A Direction and a Gap — Layout Without Coordinates

Part 1's screen had three nodes, each holding exactly one child. Real screens are not like that.

The node that holds several

{ "type": "linear", "direction": "vertical", "spacing": 12, "alignment": "center",
  "children": [ ... ] }

linear takes children, and decides exactly three things.

• direction — vertical or horizontal
• spacing — the gap between them
• alignment — how they line up on the cross axis

To lay them out sideways, change direction on that node. The children are untouched.

{ "type": "linear", "direction": "horizontal", "spacing": 16,
  "children": [
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ede9fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ddd6fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#c4b5fd", "borderRadius": 10 } } ] }

box is a rectangle with a size and a look. Give it a child and it becomes that child's container; leave it empty and it is just a painted surface. These three are empty.

There are no coordinates

Nowhere in this definition is there a top, left, x, or y. That is not laziness in the runtime.

A screen arriving from a server means whoever wrote the screen does not know the size of the space it will land in. This 906-byte file is the same file at 1000 pixels wide, on a tablet, and on a desktop window dragged to half width. Write coordinates and it is correct in exactly one of those.

A direction and a gap can be written without knowing the size. So that is all this layer has.