SDUI Playground

Layout System

How SDUI components are sized, padded, and positioned within their parents.

Main Axis (Row: horizontal, Column: vertical)

start
end
center
space_between
space_around
space_evenly

Cross Axis (perpendicular to main)

start
end
center

Size Types

TypeJSONBehavior
fixed{ "width": 200 }Exact dp value
fill{ "width": "fill" }Expand to fill available space (100%)
wrap{ "width": "wrap" }Shrink to content (fit-content)
aspectRatio{ "width": "fill", "aspectRatio": 1.333 }Width/height ratio (e.g. 4:3 = 1.333)

Padding

Priority: individual sides → horizontal/vertical → all. Values in dp.

Shorthand

{ "padding": { "all": 16 } }

{ "padding": {
    "horizontal": 12,
    "vertical": 8
  }
}

Per-side

{ "padding": {
    "top": 16,
    "bottom": 8,
    "start": 12,
    "end": 12
  }
}

Parent Layout

Applied on a child to control how it behaves within its Row/Column parent.

FieldTypeDescription
weightfloatFlex weight — distributes remaining space proportionally
alignstart | center | endOverride cross-axis alignment for this specific child

Box Content Alignment

3x3 grid of alignment positions for children within a Box container.

·
topStart
·
topCenter
·
topEnd
·
centerStart
·
center
·
centerEnd
·
bottomStart
·
bottomCenter
·
bottomEnd