Stilo

Edge

Utilities for controlling offsets in each of the four cardinal directions. Typically used for paddings and margins inside a box.

The edge construct utilities are defined inside StiloEdge
name edge
all0
top: 0px; right: 0px; bottom: 0px; left: 0px
horiz0
right: 0px; left: 0px
vert0
top: 0px; bottom: 0px
top0
top: 0px
right0
right: 0px
bottom0
bottom: 0px
left0
left: 0px
all1
top: 4px; right: 4px; bottom: 4px; left: 4px
horiz1
right: 4px; left: 4px
vert1
top: 4px; bottom: 4px
top1
top: 4px
right1
right: 4px
bottom1
bottom: 4px
left1
left: 4px
all2
top: 8px; right: 8px; bottom: 8px; left: 8px
horiz2
right: 8px; left: 8px
vert2
top: 8px; bottom: 8px
top2
top: 8px
right2
right: 8px
bottom2
bottom: 8px
left2
left: 8px
all3
top: 12px; right: 12px; bottom: 12px; left: 12px
horiz3
right: 12px; left: 12px
vert3
top: 12px; bottom: 12px
top3
top: 12px
right3
right: 12px
bottom3
bottom: 12px
left3
left: 12px
all4
top: 16px; right: 16px; bottom: 16px; left: 16px
horiz4
right: 16px; left: 16px
vert4
top: 16px; bottom: 16px
top4
top: 16px
right4
right: 16px
bottom4
bottom: 16px
left4
left: 16px
all5
top: 20px; right: 20px; bottom: 20px; left: 20px
horiz5
right: 20px; left: 20px
vert5
top: 20px; bottom: 20px
top5
top: 20px
right5
right: 20px
bottom5
bottom: 20px
left5
left: 20px
all6
top: 24px; right: 24px; bottom: 24px; left: 24px
horiz6
right: 24px; left: 24px
vert6
top: 24px; bottom: 24px
top6
top: 24px
right6
right: 24px
bottom6
bottom: 24px
left6
left: 24px
all7
top: 28px; right: 28px; bottom: 28px; left: 28px
horiz7
right: 28px; left: 28px
vert7
top: 28px; bottom: 28px
top7
top: 28px
right7
right: 28px
bottom7
bottom: 28px
left7
left: 28px
all8
top: 32px; right: 32px; bottom: 32px; left: 32px
horiz8
right: 32px; left: 32px
vert8
top: 32px; bottom: 32px
top8
top: 32px
right8
right: 32px
bottom8
bottom: 32px
left8
left: 32px
all9
top: 36px; right: 36px; bottom: 36px; left: 36px
horiz9
right: 36px; left: 36px
vert9
top: 36px; bottom: 36px
top9
top: 36px
right9
right: 36px
bottom9
bottom: 36px
left9
left: 36px
all10
top: 40px; right: 40px; bottom: 40px; left: 40px
horiz10
right: 40px; left: 40px
vert10
top: 40px; bottom: 40px
top10
top: 40px
right10
right: 40px
bottom10
bottom: 40px
left10
left: 40px
all11
top: 44px; right: 44px; bottom: 44px; left: 44px
horiz11
right: 44px; left: 44px
vert11
top: 44px; bottom: 44px
top11
top: 44px
right11
right: 44px
bottom11
bottom: 44px
left11
left: 44px
all12
top: 48px; right: 48px; bottom: 48px; left: 48px
horiz12
right: 48px; left: 48px
vert12
top: 48px; bottom: 48px
top12
top: 48px
right12
right: 48px
bottom12
bottom: 48px
left12
left: 48px
all14
top: 56px; right: 56px; bottom: 56px; left: 56px
horiz14
right: 56px; left: 56px
vert14
top: 56px; bottom: 56px
top14
top: 56px
right14
right: 56px
bottom14
bottom: 56px
left14
left: 56px
all16
top: 64px; right: 64px; bottom: 64px; left: 64px
horiz16
right: 64px; left: 64px
vert16
top: 64px; bottom: 64px
top16
top: 64px
right16
right: 64px
bottom16
bottom: 64px
left16
left: 64px
all20
top: 80px; right: 80px; bottom: 80px; left: 80px
horiz20
right: 80px; left: 80px
vert20
top: 80px; bottom: 80px
top20
top: 80px
right20
right: 80px
bottom20
bottom: 80px
left20
left: 80px
all24
top: 96px; right: 96px; bottom: 96px; left: 96px
horiz24
right: 96px; left: 96px
vert24
top: 96px; bottom: 96px
top24
top: 96px
right24
right: 96px
bottom24
bottom: 96px
left24
left: 96px
all28
top: 112px; right: 112px; bottom: 112px; left: 112px
horiz28
right: 112px; left: 112px
vert28
top: 112px; bottom: 112px
top28
top: 112px
right28
right: 112px
bottom28
bottom: 112px
left28
left: 112px
all32
top: 128px; right: 128px; bottom: 128px; left: 128px
horiz32
right: 128px; left: 128px
vert32
top: 128px; bottom: 128px
top32
top: 128px
right32
right: 128px
bottom32
bottom: 128px
left32
left: 128px
all36
top: 144px; right: 144px; bottom: 144px; left: 144px
horiz36
right: 144px; left: 144px
vert36
top: 144px; bottom: 144px
top36
top: 144px
right36
right: 144px
bottom36
bottom: 144px
left36
left: 144px
all40
top: 160px; right: 160px; bottom: 160px; left: 160px
horiz40
right: 160px; left: 160px
vert40
top: 160px; bottom: 160px
top40
top: 160px
right40
right: 160px
bottom40
bottom: 160px
left40
left: 160px
all44
top: 176px; right: 176px; bottom: 176px; left: 176px
horiz44
right: 176px; left: 176px
vert44
top: 176px; bottom: 176px
top44
top: 176px
right44
right: 176px
bottom44
bottom: 176px
left44
left: 176px
all48
top: 192px; right: 192px; bottom: 192px; left: 192px
horiz48
right: 192px; left: 192px
vert48
top: 192px; bottom: 192px
top48
top: 192px
right48
right: 192px
bottom48
bottom: 192px
left48
left: 192px
all52
top: 208px; right: 208px; bottom: 208px; left: 208px
horiz52
right: 208px; left: 208px
vert52
top: 208px; bottom: 208px
top52
top: 208px
right52
right: 208px
bottom52
bottom: 208px
left52
left: 208px
all56
top: 224px; right: 224px; bottom: 224px; left: 224px
horiz56
right: 224px; left: 224px
vert56
top: 224px; bottom: 224px
top56
top: 224px
right56
right: 224px
bottom56
bottom: 224px
left56
left: 224px
all60
top: 240px; right: 240px; bottom: 240px; left: 240px
horiz60
right: 240px; left: 240px
vert60
top: 240px; bottom: 240px
top60
top: 240px
right60
right: 240px
bottom60
bottom: 240px
left60
left: 240px
all64
top: 256px; right: 256px; bottom: 256px; left: 256px
horiz64
right: 256px; left: 256px
vert64
top: 256px; bottom: 256px
top64
top: 256px
right64
right: 256px
bottom64
bottom: 256px
left64
left: 256px
all72
top: 288px; right: 288px; bottom: 288px; left: 288px
horiz72
right: 288px; left: 288px
vert72
top: 288px; bottom: 288px
top72
top: 288px
right72
right: 288px
bottom72
bottom: 288px
left72
left: 288px
all80
top: 320px; right: 320px; bottom: 320px; left: 320px
horiz80
right: 320px; left: 320px
vert80
top: 320px; bottom: 320px
top80
top: 320px
right80
right: 320px
bottom80
bottom: 320px
left80
left: 320px
all96
top: 384px; right: 384px; bottom: 384px; left: 384px
horiz96
right: 384px; left: 384px
vert96
top: 384px; bottom: 384px
top96
top: 384px
right96
right: 384px
bottom96
bottom: 384px
left96
left: 384px

Usage Example

Center(
    child: Row(
      children: [
        Padding(
          padding: StiloEdge.all4,
          child: Container(
            width: StiloWidth.w36,
            height: StiloHeight.h36,
            color: StiloColor.blue[500],
          ),
        ),
        Container(
          width: StiloWidth.w36,
          height: StiloHeight.h36,
          margin: StiloEdge.top32,
          color: StiloColor.red[500],
        ),
      ],
    ),
  )