Blur

Use blur utilities to apply a blur filter to an element. Increasing the blur value makes the element progressively more blurred.

Basic example

Use utilities like blur-sm and blur-2xl to control the amount of blur applied to an element:

Style('blur-none', child: Image.network('/img/mountains.jpg'))
Style('blur-sm', child: Image.network('/img/mountains.jpg'))
Style('blur-lg', child: Image.network('/img/mountains.jpg'))
Style('blur-2xl', child: Image.network('/img/mountains.jpg'))

Class reference

Class	Description
blur-none	Remove blur filter
blur-xs	Apply an extra small blur (4px)
blur-sm	Apply a small blur (8px)
blur	Apply a normal blur (8px)
blur-md	Apply a medium blur (12px)
blur-lg	Apply a large blur (16px)
blur-xl	Apply an extra large blur (24px)
blur-2xl	Apply a 2x extra large blur (40px)
blur-3xl	Apply a 3x extra large blur (64px)