Writing a Layout File

Each layout file must have one root widget, typically a FlexContainer. Widgets and type values are declared using a constructor-like syntax:

WidgetName(
    property_name = value,
    another_property = true,
    nested_property = TypeValueName(
        type_value_property = 5,
    )
)

You can include trailing commas for readability. If a widget or type value has default properties, they can be omitted:

Image()

To nest widgets, use the children property inside a FlexContainer:

FlexContainer() {
    Text(kind = summary)
    Image()
}

Child widgets are enclosed in curly braces, with whitespace separating them.

The FlexContainer organizes its child widgets either horizontally or vertically.

Property	Description	Type	Default
`direction`	Layout direction (`horizontal` or `vertical`).	`Literal`	-
`max_width`	Maximum width of the container.	`UInt`	MAX
`max_height`	Maximum height of the container.	`UInt`	MAX
`border`	Border around the container.	`Border`	Default border values
`spacing`	Spacing between child widgets.	`Spacing`	Default spacing values
`alignment`	Horizontal and vertical alignment of content (`start`, `center`, `end`).	`Alignment`	-
`transparent_background`	Make the background transparent (`true` or `false`)	`Literal`	`false`

The Text widget is used for summaries and body text. Specify the kind of text to display.

Property	Description	Type	Default
`kind`	Type of text (`summary` or `body`).	`Literal`	-

The Image widget displays an image. It uses properties defined in the main configuration.

Supporting Type Values

Defines padding or margin offsets. Currently, individual values (e.g., top, right) must be set explicitly.

Property	Description	Type
`top`	Offset from the top.	`UInt`
`right`	Offset from the right.	`UInt`
`bottom`	Offset from the bottom.	`UInt`
`left`	Offset from the left.	`UInt`

Controls how content is aligned within a widget.

Property	Description	Type	Default
`horizontal`	Horizontal alignment (`start`, `end`, `center`, `space-between`).	`Literal`	-
`vertical`	Vertical alignment (`start`, `end`, `center`, `space-between`).	`Literal`	-