Sizing

Flutter package for scaling UI elements across different screen sizes. One single extension for everything — fonts, containers, padding, and radius all scale with the same formula, so design proportions are always preserved.

Demo

Installation

dependencies:
  sizing: ^2.0.0

Setup

Wrap your app with SizingBuilder at the root:

void main() {
  runApp(
    SizingBuilder(
      builder: (context) => const MyApp(),
    ),
  );
}

SizingBuilder parameters

Parameter Type Default Description
baseSize Size Size(390, 850) Design reference dimensions. Can be in any orientation.
factor double 0–1 0.5 Scaling intensity. 0 = no scaling, 1 = pure linear, 0.5 = square root curve (recommended).
respectSystemFontScale bool true Respect the system accessibility text size preference.
scaleLayoutWithFont bool true When true, layout and fonts grow together with the accessibility preference, preserving proportions. When false, only text grows (native Flutter behavior).
customScale CustomScaleFunction? null Custom scaling function for the .c extension.

Extensions

// Power scale (default) — smooth curve, flattens on large screens
16.s

// Linear scale — constant growth, useful for hero images
16.l

// Custom scale — uses your CustomScaleFunction
16.c

// Inline factor override for one element (does not affect global state)
16.s.f(0.8)

// Screen percentages
0.5.w   // 50% of screen width
0.25.h  // 25% of screen height

Scaling models

Power (.s) — recommended

size × ratio^factor
factor ratio 1.0 ratio 1.5 ratio 2.0 ratio 2.84 (13" tablet)
0.3 ×1.00 ×1.13 ×1.23 ×1.37
0.5 ×1.00 ×1.22 ×1.41 ×1.69
0.7 ×1.00 ×1.31 ×1.62 ×2.07
1.0 ×1.00 ×1.50 ×2.00 ×2.84

Linear (.l)

size × (1 + (ratio − 1) × factor)

Grows at a constant rate. More aggressive than Power at high ratios.

Custom (.c)

typedef CustomScaleFunction = double Function(double ratio, double factor);

SizingBuilder(
  customScale: (ratio, factor) => ratio * 1.2,
  builder: (context) => const MyApp(),
)

Ratio calculation

The ratio is always computed as short-side / short-side, making it orientation-agnostic:

shortRatio = min(screenW, screenH) / min(baseW, baseH)

Rotating the device does not break calculations. baseSize can be passed in portrait or landscape — the result is identical.

Accessibility

respectSystemFontScale scaleLayoutWithFont Behavior
true true Default. Layout and fonts grow together. Proportions always preserved.
true false Only text grows (native Flutter behavior). Layout stays fixed.
false — App ignores system accessibility completely.

Usage example

Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.all(12.s),
    child: Column(
      children: [
        // Font and container scale exactly the same
        Text('Hello', style: TextStyle(fontSize: 16.s)),
        Container(height: 48.s, width: 0.9.w),

        // Hero image — linear grows more on large screens
        Container(height: 200.l),

        // Inline factor override for one element
        Text('Title', style: TextStyle(fontSize: 24.s.f(0.8))),

        SizedBox(height: 0.1.h),
      ],
    ),
  );
}

Migrating from v1

// SizingBuilder
builder: () => ...          →  builder: (context) => ...
systemFontScale: true       →  respectSystemFontScale: true

// Extensions
16.fs  / 16.fss  →  16.s
100.ss / 100.s   →  100.s
100.vs           →  100.s
0.5.sw           →  0.5.w
0.5.sh           →  0.5.h
16.fss.f(0.8)    →  16.s.f(0.8)

Libraries

sizing