Home

Guides

Editor

Components

Actions

Conditions

A Guide to Containers: Building the Foundations of Your App

Embrace the Power of Containers

Containers are the core building blocks, and getting to grips with them will make building complex layouts a breeze. With so many device sizes these days, Your App Creator has been built with responsive layouts at its core. All components are laid out relative to each other, making them adapt to every device. Containers are configured to layout, so when we update container settings, they are applied to their content. To update how a container is laid out, you update its parent settings.


Core Concepts

  • Axis

    • X: Position children in a row from left to right.

    • Y: Position children in a column from top to bottom.

    • Z: Position children on top of each other.

  • Alignment

    • Horizontal: Position children at the Start(left), Centeror End(right). This might have no affect if the container is not wider than the children; check its width.

    • Vertical: Position children, Top, Centeror Bottom. The container must be taller than the children for this to work.

    • Spacing

      • Between: Evenly space between each child.

      • Around: Space between, before and after each child.

      • ByValue: Space by a fixed amount.

Containers also have other properties, such as border and background color. They can be used as dividers and spacers if needed.


Creating a Card

Here we have 3 containers, with the key highlights:

  • Root Container:

    • Axis: X

    • Width: 100%

    • Spacing: Between

  • Blue Square:

    • Fixed Width and Height

  • Y Stacked Text:

    • Axis: Y

    • Alignment: End

    • Spacing: ByValue (10).