Hue Rotate

Use hue-rotate-<number> utilities to rotate the hue of an element’s colors. The value represents degrees of rotation around the color wheel.

Basic example

Use utilities like hue-rotate-90 and hue-rotate-180 to rotate the hue of an element by degrees:

Style('hue-rotate-15', child: Image.network('/img/mountains.jpg'))
Style('hue-rotate-90', child: Image.network('/img/mountains.jpg'))
Style('hue-rotate-180', child: Image.network('/img/mountains.jpg'))
Style('hue-rotate-270', child: Image.network('/img/mountains.jpg'))

Using negative values

Use utilities like -hue-rotate-15 and -hue-rotate-45 to set a negative hue rotate value:

Style('-hue-rotate-15', child: Image.network('/img/mountains.jpg'))
Style('-hue-rotate-45', child: Image.network('/img/mountains.jpg'))
Style('-hue-rotate-90', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
hue-rotate-<number>	Set hue rotation to <number> degrees
-hue-rotate-<number>	Set hue rotation to negative <number> degrees