A CSS filter is a property that can be applied to an element to change how it is displayed. Filters can be used to modify the color, brightness, or saturation of an element, or to blur or sharpen its pixels. There are a number of different filters that can be applied, and they can be combined to create more complex effects. For example, you could use a blur filter to make an element look like it is in the distance, or use a sepia filter to give it a vintage look.
The CSS Filter Package for Flutter Widgets lets you create awesome and elegant designs with ease. You can use any of the pre-made effects, or customize them according to your liking! This package works on all platforms so it’ll be easy enough no matter what type of material design skews towards – whether it’s Material Theme or not (it supports all major platforms such as Windows, web, Android, iOS, Mac, and Linux).
The rich preset options will help get started quickly without needing much customization skillset required while still being able to take full control later down the road as needed.
Support filters:
- contrast()
- grayscale()
- sepia()
- hueRotate()
- brightness()
- saturate()
- invert()
- blur()
- opacity()
//single filter
CSSFilter.contrast(child: const Text('foo'), value: 1.2);
//multiple filters
CSSFilter.apply(
child: const Text('bar'),
value: CSSFilterMatrix().contrast(1.2).sepia(0.8).hueRotate(90.0).invert(0.9).opacity(0.9)
);
//use preset
CSSFilterPresets.insXpro2(child: const Text('Your widget'));
