Spacing

MihrSpacing provides a consistent spacing system built on a 4px soft-grid. Every value is divisible by 4, with 2px and 6px exceptions for fine-tuning.

Two layers: semantic tokens for component-level spacing, and primitives for pixel-precise control. Pre-built EdgeInsets and SizedBox gap helpers are also available.

Semantic tokens17 tokens

Named sizes for gaps, padding, and margins. These are the recommended tokens for component development.

Token	Pixels	Scale
`none`	0px
`xxs`	2px
`xs`	4px
`sm`	6px
`md`	8px
`lg`	12px
`xl`	16px
`x2l`	20px
`x3l`	24px
`x4l`	32px
`x5l`	40px
`x6l`	48px
`x7l`	64px
`x8l`	80px
`x9l`	96px
`x10l`	128px
`x11l`	160px

Dart

// Direct value
SizedBox(height: MihrSpacing.lg);  // 12px

// EdgeInsets shorthand
Padding(padding: MihrSpacing.insetsXl);  // 16px all sides

Primitive scale32 values

Raw numeric scale (p0–p480) where multiplier × 4 = pixels. Use when semantic names don't fit.

Token	Pixels	Scale
`p0`	0px
`p0_5`	2px
`p1`	4px
`p1_5`	6px
`p2`	8px
`p3`	12px
`p4`	16px
`p5`	20px
`p6`	24px
`p8`	32px
`p10`	40px
`p12`	48px
`p16`	64px
`p20`	80px
`p24`	96px
`p32`	128px
`p40`	160px
`p48`	192px
`p56`	224px
`p64`	256px
`p80`	320px
`p96`	384px
`p120`	480px
`p140`	560px
`p160`	640px
`p180`	720px
`p192`	768px
`p256`	1024px
`p320`	1280px
`p360`	1440px
`p400`	1600px
`p480`	1920px

EdgeInsets helpers

Pre-built EdgeInsets constants for common padding patterns. Three variants: all-sides, horizontal-only, vertical-only.

Pattern	Example	Equivalent
`insets[Size]`	`MihrSpacing.insetsXl`	EdgeInsets.all(16)
`insetsH[Size]`	`MihrSpacing.insetsHXl`	EdgeInsets.symmetric(horizontal: 16)
`insetsV[Size]`	`MihrSpacing.insetsVX3l`	EdgeInsets.symmetric(vertical: 24)

Available sizes: Xxs (2px), Xs (4px), Sm (6px), Md (8px), Lg (12px), Xl (16px), X2l (20px), X3l (24px), X4l (32px), X5l (40px), X6l (48px).

Gap helpers

Pre-built SizedBox constants for spacing between children in Column and Row.

Pattern	Example	Equivalent
`gapV[Size]`	`MihrSpacing.gapVLg`	SizedBox(height: 12)
`gapH[Size]`	`MihrSpacing.gapHMd`	SizedBox(width: 8)

Dart

Column(
  children: [
    headerWidget,
    MihrSpacing.gapVLg,  // 12px vertical gap
    bodyWidget,
    MihrSpacing.gapVXl,  // 16px vertical gap
    footerWidget,
  ],
);

Row(
  children: [
    icon,
    MihrSpacing.gapHXs,  // 4px horizontal gap
    label,
  ],
);

When to use which

Semantic tokens (MihrSpacing.xl) — component padding, section gaps, list spacing. Always prefer these.

EdgeInsets helpers (MihrSpacing.insetsXl) — when you need EdgeInsets directly in a Padding widget.

Gap helpers (MihrSpacing.gapVMd) — vertical/horizontal gaps between Column/Row children.

Primitives (MihrSpacing.p48) — exact pixel values when semantic names don't fit (e.g., large layout dimensions).

Dart

// WRONG — hardcoded values
Padding(padding: EdgeInsets.all(16));
SizedBox(height: 24);

// CORRECT — semantic tokens
Padding(padding: MihrSpacing.insetsXl);  // 16px
SizedBox(height: MihrSpacing.x3l);       // 24px

// CORRECT — primitives (when semantic name doesn't fit)
SizedBox(width: MihrSpacing.p48);        // 192px