Scale

Use scale utilities to scale an element by a percentage of its original size. Negative values mirror the element.

Basic example

Use scale-<number> utilities like scale-75 and scale-150 to scale an element uniformly on both axes:

Style('scale-75 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-100 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-125 ...', child: Image.network('/img/mountains.jpg'))

Scaling on the x-axis

Use scale-x-<number> utilities like scale-x-75 to scale an element horizontally:

Style('scale-x-75 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-x-100 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-x-125 ...', child: Image.network('/img/mountains.jpg'))

Scaling on the y-axis

Use scale-y-<number> utilities like scale-y-75 to scale an element vertically:

Style('scale-y-75 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-y-100 ...', child: Image.network('/img/mountains.jpg'))
Style('scale-y-125 ...', child: Image.network('/img/mountains.jpg'))

Using negative values

Use -scale-<number>, -scale-x-<number>, or -scale-y-<number> to mirror and scale an element:

Style('-scale-x-75 ...', child: Image.network('/img/mountains.jpg'))
Style('-scale-100 ...', child: Image.network('/img/mountains.jpg'))
Style('-scale-y-125 ...', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
scale-<number>	Scale both axes by <number> percent (e.g. scale-75 → 0.75x)
scale-x-<number>	Scale the x-axis by <number> percent
scale-y-<number>	Scale the y-axis by <number> percent
-scale-<number>	Mirror both axes and scale by <number> percent
-scale-x-<number>	Mirror horizontally and scale x by <number> percent
-scale-y-<number>	Mirror vertically and scale y by <number> percent