css_filter – Apply Filters to Widget like CSS Filter

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.

Download

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'));

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close