Translate
Use translate utilities to move an element along the X axis, Y axis, or both, using the spacing scale or a percentage of the element’s own size.
Using the spacing scale
Section titled “Using the spacing scale”Use translate-<number> utilities like translate-2 and -translate-4 to translate an element on both axes:
Style('-translate-6 ...', child: Image.network('/img/mountains.jpg'))Style('translate-2 ...', child: Image.network('/img/mountains.jpg'))Style('translate-8 ...', child: Image.network('/img/mountains.jpg'))Using a percentage
Section titled “Using a percentage”Use translate-<fraction> utilities like translate-1/4 and -translate-full to translate an element by a percentage of its own size:
Style('-translate-1/4 ...', child: Image.network('/img/mountains.jpg'))Style('translate-1/6 ...', child: Image.network('/img/mountains.jpg'))Style('translate-1/2 ...', child: Image.network('/img/mountains.jpg'))Translating on the x-axis
Section titled “Translating on the x-axis”Use translate-x-<number> or translate-x-<fraction> utilities like translate-x-2 and translate-x-1/2 to translate an element horizontally:
Style('-translate-x-4 ...', child: Image.network('/img/mountains.jpg'))Style('translate-x-2 ...', child: Image.network('/img/mountains.jpg'))Style('translate-x-1/2 ...', child: Image.network('/img/mountains.jpg'))Translating on the y-axis
Section titled “Translating on the y-axis”Use translate-y-<number> or translate-y-<fraction> utilities like translate-y-2 and translate-y-1/2 to translate an element vertically:
Style('-translate-y-4 ...', child: Image.network('/img/mountains.jpg'))Style('translate-y-2 ...', child: Image.network('/img/mountains.jpg'))Style('translate-y-1/2 ...', child: Image.network('/img/mountains.jpg'))Translating on the z-axis
Section titled “Translating on the z-axis”Use translate-z-<number> utilities like translate-z-6 and -translate-z-12 to translate an element along the z-axis. Perspective is auto-injected; the example combines rotate-x-50 so the depth foreshortening is visible:
Style('transform-3d', children: [ Style('-translate-z-8 rotate-x-50 rotate-z-45 ...', child: Image.network('/img/mountains.jpg')), Style('translate-z-4 rotate-x-50 rotate-z-45 ...', child: Image.network('/img/mountains.jpg')), Style('translate-z-12 rotate-x-50 rotate-z-45 ...', child: Image.network('/img/mountains.jpg')),])Using a custom value
Section titled “Using a custom value”Use bracket syntax for arbitrary translate values. A percentage like
translate-x-[50%] is taken relative to the element’s own size — the same
rule as the translate-x-1/2 fraction utilities — and applies as a paint-time
offset, so layout is unaffected.
Style('translate-x-[50%] ...', child: Image.network('/img/mountains.jpg'))Style('-translate-y-[25%] ...', child: Image.network('/img/mountains.jpg'))Style('translate-x-[40%] ...', child: Image.network('/img/mountains.jpg'))Class reference
Section titled “Class reference”| Class | Description |
|---|---|
translate-<number> | Translate both axes by the spacing scale value |
-translate-<number> | Translate both axes negatively by the spacing scale value |
translate-<fraction> | Translate both axes by a percentage of the element’s own size (e.g. translate-1/2) |
translate-full | Translate both axes by 100% of the element’s own size |
translate-x-<number> / translate-y-<number> | Translate a single axis by the spacing scale value |
translate-x-<fraction> / translate-y-<fraction> | Translate a single axis by a percentage of the element’s own size |
translate-x-[<percentage>] / translate-y-[<percentage>] | Arbitrary percentage of the element’s own size (e.g. translate-x-[50%]) |
translate-z-<number> | Translate along the z-axis (perspective foreshortening, auto-injected) |
-translate-x-<value> / -translate-y-<value> / -translate-z-<value> | Negative variants for any axis |