Layout components

Layout components are useful for creating the structure and arrangement of UI elements within a screen or a container. Every layout component provides a ChildComponents() call that allows the user to pass in and render nested components.

Container

Child components within a Container are laid out in the order they are declared on the z-axis, allowing for an overlaying arrangement of components within a bounded context. The Container acts as a parent, providing a scope and structure for its children, which can be any number of UI elements such as Text, Image, or even other Containers.

Container {
  ChildComponents()
}

Column

A Column arranges its child components vertically. Each child component is placed below the previous, creating a single vertical flow. This is useful for creating layouts that require a vertical arrangement of elements, such as forms or lists.

Column {
  ChildComponents()
}

Row

A Row arranges its child components horizontally. Each child component is placed next to the previous, creating a single horizontal flow. This is ideal for creating layouts that require elements to be aligned side-by-side, such as a set of buttons or icons.

Row {
  ChildComponents()
}

Center

The Center component centers its child components within its bounds. This is useful for placing a single component or a group of components in the middle of the screen or within another container, ensuring that they are visually centered.

Center {
  ChildComponents()
}

Spacer

A Spacer creates an empty space between components, useful for adding padding or separating elements visually without the need for additional styling or containers.

Spacer

//usage

Column {
  Component()
  Spacer()
  Component()
}