Stilo

Positioned

Utilities for controlling the position of a widget in its Stack.

The positioned construct utilities are defined inside StiloPositioned
name position
inset0
top: 0px; right: 0px; bottom: 0px; left: 0px
insetY0
top: 0px; bottom: 0px
insetX0
right: 0px; left: 0px
top0
top: 0px
right0
right: 0px
bottom0
bottom: 0px
left0
left: 0px
inset1
top: 4px; right: 4px; bottom: 4px; left: 4px
insetY1
top: 4px; bottom: 4px
insetX1
right: 4px; left: 4px
top1
top: 4px
right1
right: 4px
bottom1
bottom: 4px
left1
left: 4px
inset2
top: 8px; right: 8px; bottom: 8px; left: 8px
insetY2
top: 8px; bottom: 8px
insetX2
right: 8px; left: 8px
top2
top: 8px
right2
right: 8px
bottom2
bottom: 8px
left2
left: 8px
inset3
top: 12px; right: 12px; bottom: 12px; left: 12px
insetY3
top: 12px; bottom: 12px
insetX3
right: 12px; left: 12px
top3
top: 12px
right3
right: 12px
bottom3
bottom: 12px
left3
left: 12px
inset4
top: 16px; right: 16px; bottom: 16px; left: 16px
insetY4
top: 16px; bottom: 16px
insetX4
right: 16px; left: 16px
top4
top: 16px
right4
right: 16px
bottom4
bottom: 16px
left4
left: 16px
inset5
top: 20px; right: 20px; bottom: 20px; left: 20px
insetY5
top: 20px; bottom: 20px
insetX5
right: 20px; left: 20px
top5
top: 20px
right5
right: 20px
bottom5
bottom: 20px
left5
left: 20px
inset6
top: 24px; right: 24px; bottom: 24px; left: 24px
insetY6
top: 24px; bottom: 24px
insetX6
right: 24px; left: 24px
top6
top: 24px
right6
right: 24px
bottom6
bottom: 24px
left6
left: 24px
inset7
top: 28px; right: 28px; bottom: 28px; left: 28px
insetY7
top: 28px; bottom: 28px
insetX7
right: 28px; left: 28px
top7
top: 28px
right7
right: 28px
bottom7
bottom: 28px
left7
left: 28px
inset8
top: 32px; right: 32px; bottom: 32px; left: 32px
insetY8
top: 32px; bottom: 32px
insetX8
right: 32px; left: 32px
top8
top: 32px
right8
right: 32px
bottom8
bottom: 32px
left8
left: 32px
inset9
top: 36px; right: 36px; bottom: 36px; left: 36px
insetY9
top: 36px; bottom: 36px
insetX9
right: 36px; left: 36px
top9
top: 36px
right9
right: 36px
bottom9
bottom: 36px
left9
left: 36px
inset10
top: 40px; right: 40px; bottom: 40px; left: 40px
insetY10
top: 40px; bottom: 40px
insetX10
right: 40px; left: 40px
top10
top: 40px
right10
right: 40px
bottom10
bottom: 40px
left10
left: 40px
inset11
top: 44px; right: 44px; bottom: 44px; left: 44px
insetY11
top: 44px; bottom: 44px
insetX11
right: 44px; left: 44px
top11
top: 44px
right11
right: 44px
bottom11
bottom: 44px
left11
left: 44px
inset12
top: 48px; right: 48px; bottom: 48px; left: 48px
insetY12
top: 48px; bottom: 48px
insetX12
right: 48px; left: 48px
top12
top: 48px
right12
right: 48px
bottom12
bottom: 48px
left12
left: 48px
inset14
top: 56px; right: 56px; bottom: 56px; left: 56px
insetY14
top: 56px; bottom: 56px
insetX14
right: 56px; left: 56px
top14
top: 56px
right14
right: 56px
bottom14
bottom: 56px
left14
left: 56px
inset16
top: 64px; right: 64px; bottom: 64px; left: 64px
insetY16
top: 64px; bottom: 64px
insetX16
right: 64px; left: 64px
top16
top: 64px
right16
right: 64px
bottom16
bottom: 64px
left16
left: 64px
inset20
top: 80px; right: 80px; bottom: 80px; left: 80px
insetY20
top: 80px; bottom: 80px
insetX20
right: 80px; left: 80px
top20
top: 80px
right20
right: 80px
bottom20
bottom: 80px
left20
left: 80px
inset24
top: 96px; right: 96px; bottom: 96px; left: 96px
insetY24
top: 96px; bottom: 96px
insetX24
right: 96px; left: 96px
top24
top: 96px
right24
right: 96px
bottom24
bottom: 96px
left24
left: 96px
inset28
top: 112px; right: 112px; bottom: 112px; left: 112px
insetY28
top: 112px; bottom: 112px
insetX28
right: 112px; left: 112px
top28
top: 112px
right28
right: 112px
bottom28
bottom: 112px
left28
left: 112px
inset32
top: 128px; right: 128px; bottom: 128px; left: 128px
insetY32
top: 128px; bottom: 128px
insetX32
right: 128px; left: 128px
top32
top: 128px
right32
right: 128px
bottom32
bottom: 128px
left32
left: 128px
inset36
top: 144px; right: 144px; bottom: 144px; left: 144px
insetY36
top: 144px; bottom: 144px
insetX36
right: 144px; left: 144px
top36
top: 144px
right36
right: 144px
bottom36
bottom: 144px
left36
left: 144px
inset40
top: 160px; right: 160px; bottom: 160px; left: 160px
insetY40
top: 160px; bottom: 160px
insetX40
right: 160px; left: 160px
top40
top: 160px
right40
right: 160px
bottom40
bottom: 160px
left40
left: 160px
inset44
top: 176px; right: 176px; bottom: 176px; left: 176px
insetY44
top: 176px; bottom: 176px
insetX44
right: 176px; left: 176px
top44
top: 176px
right44
right: 176px
bottom44
bottom: 176px
left44
left: 176px
inset48
top: 192px; right: 192px; bottom: 192px; left: 192px
insetY48
top: 192px; bottom: 192px
insetX48
right: 192px; left: 192px
top48
top: 192px
right48
right: 192px
bottom48
bottom: 192px
left48
left: 192px
inset52
top: 208px; right: 208px; bottom: 208px; left: 208px
insetY52
top: 208px; bottom: 208px
insetX52
right: 208px; left: 208px
top52
top: 208px
right52
right: 208px
bottom52
bottom: 208px
left52
left: 208px
inset56
top: 224px; right: 224px; bottom: 224px; left: 224px
insetY56
top: 224px; bottom: 224px
insetX56
right: 224px; left: 224px
top56
top: 224px
right56
right: 224px
bottom56
bottom: 224px
left56
left: 224px
inset60
top: 240px; right: 240px; bottom: 240px; left: 240px
insetY60
top: 240px; bottom: 240px
insetX60
right: 240px; left: 240px
top60
top: 240px
right60
right: 240px
bottom60
bottom: 240px
left60
left: 240px
inset64
top: 256px; right: 256px; bottom: 256px; left: 256px
insetY64
top: 256px; bottom: 256px
insetX64
right: 256px; left: 256px
top64
top: 256px
right64
right: 256px
bottom64
bottom: 256px
left64
left: 256px
inset72
top: 288px; right: 288px; bottom: 288px; left: 288px
insetY72
top: 288px; bottom: 288px
insetX72
right: 288px; left: 288px
top72
top: 288px
right72
right: 288px
bottom72
bottom: 288px
left72
left: 288px
inset80
top: 320px; right: 320px; bottom: 320px; left: 320px
insetY80
top: 320px; bottom: 320px
insetX80
right: 320px; left: 320px
top80
top: 320px
right80
right: 320px
bottom80
bottom: 320px
left80
left: 320px
inset96
top: 384px; right: 384px; bottom: 384px; left: 384px
insetY96
top: 384px; bottom: 384px
insetX96
right: 384px; left: 384px
top96
top: 384px
right96
right: 384px
bottom96
bottom: 384px
left96
left: 384px

Usage Example

Stack(
    children: [
      Container(
        width: StiloWidth.w64,
        height: StiloHeight.h64,
        color: StiloColor.blue[500],
      ),
      StiloPositioned.inset12(
        child: Container(
          width: StiloWidth.w32,
          height: StiloHeight.h32,
          color: StiloColor.red[500],
        ),
      ),
    ],
  )