Grayscale

Use grayscale utilities to control how much of an element is rendered in grayscale.

Basic example

Use utilities like grayscale-50 and grayscale to control the amount of grayscale effect applied to an element:

Style('grayscale-0 ...', child: Image.network('/img/mountains.jpg'))
Style('grayscale-25 ...', child: Image.network('/img/mountains.jpg'))
Style('grayscale-50 ...', child: Image.network('/img/mountains.jpg'))
Style('grayscale ...', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
grayscale-0	Set grayscale to 0
grayscale-25	Set grayscale to 0.25
grayscale-50	Set grayscale to 0.5
grayscale-75	Set grayscale to 0.75
grayscale-100	Set grayscale to 1
grayscale	Set grayscale to 1 (alias for grayscale-100)