Skip to content

Basic Layouts

Lucy Studio provides foundational layout widgets such as Row, Column, Stack, and Wrap.

Use them to control how UI elements are positioned and aligned.

Basic Layouts

Row and Column Properties

1. Main Axis Size

Controls the size of the widget along its main axis.

  • For Row, main axis is horizontal.

  • For Column, main axis is vertical.

  • Row main axis size

    • min: Uses the sum of child widths.
    • max: Uses the maximum width allowed by the parent (default).

  • Column main axis size

    • min: Uses the sum of child heights.
    • max: Uses the maximum height allowed by the parent (default).

2. Main Axis Alignment

Controls child alignment along the main axis.

  • Row options

    • Start: Align left.
    • Center: Align center.
    • End: Align right.
    • Space Between: Equal spacing between children, no edge spacing.
    • Space Around: Equal spacing around children (edge spacing is half of between spacing).
    • Space Evenly: Equal spacing at start, between children, and end.

    Row Main Axis

  • Column options

    • Start: Align top.
    • Center: Align center.
    • End: Align bottom.
    • Space Between: Equal spacing between children, no edge spacing.
    • Space Around: Equal spacing around children (edge spacing is half of between spacing).
    • Space Evenly: Equal spacing at start, between children, and end.

    Column Main Axis

3. Cross Axis Alignment

The cross axis is perpendicular to the main axis.

  • Row cross axis is vertical

    • Start, Center, End
    • Stretch: Child height expands to full Row height.
    • Baseline: Aligns by text baseline (textBaseline required).

    Row Cross Axis

  • Column cross axis is horizontal

    • Start, Center, End
    • Stretch: Child width expands to full Column width.
    • Baseline: Aligns by text baseline (textBaseline required).

    Column Cross Axis

Stack and Wrap Properties

Stack

Stack overlays child widgets. Alignment defines the anchor for children without explicit position.

Property Type Default Description
alignment Alignment topLeft Alignment anchor for non-positioned children
textDirection Enum ltr Horizontal layout direction
fit Enum loose How non-positioned children fit the Stack
clipBehavior Enum hardEdge Clipping behavior for out-of-bounds children

StackFit options

  • loose: Child keeps its own size when smaller than Stack.
  • expand: Child expands to fill the Stack.

Wrap

Wrap lays out children horizontally or vertically and moves overflow to the next line.

Property Type Default Description
direction Enum horizontal Main axis direction
alignment Enum start Child alignment on main axis
runAlignment Enum start Alignment between multiple runs
spacing double 0.0 Spacing between children on main axis
runSpacing double 0.0 Spacing between runs
clipBehavior Enum none Clipping behavior