Use CSS filter effects on Flutter

by Flutter Awesome

CSS Filter for Flutter

Use CSS filter effects on Flutter.

IFstruct parser supports generating flutter code from iofod visually edited projects. We have separated its filter module code and added many preset effects to form the current CSS Filter for Flutter, which facilitates all flutter projects to use the excellent design of the Web: CSS filter.

Features

  • Simple and efficient
  • Support multiple filter effects overlay
  • Rich preset effects.
  • Full platform support
  • Customize your own effect
  • Null-safety

Getting started

After importing the dependent, you can use the basic filters through CSSFilter.

import 'package:css_filter/css_filter.dart';

CSSFilter.contrast(child: const Text('foo'), value: 1.2);

Support filters:

  • contrast()
  • grayscale()
  • sepia()
  • hueRotate()
  • brightness()
  • saturate()
  • invert()
  • blur()
  • opacity()

You can combine and overlay these filters in flutter just as you would with a CSS filter. Use CSSFilter.apply in conjunction with CSSFilterMatrix(). Such as:

CSSFilter.apply(
  child: const Text('bar'),
  value: CSSFilterMatrix().contrast(1.2).sepia(0.8).hueRotate(90.0).invert(0.9).opacity(0.9)
);

Note: the order of the chain calls represents the order in which the filters are applied, and the order in which the filter effects are applied affects the final result.

Use presets

The CSSgram project does an excellent job of providing the CSS world with Instagram-like filters, and instagram.css complements it with more types of filters. We’ve combined these two libraries to encapsulate several presets that can call through CSSFilterPresets.

import 'package:css_filter/css_filter.dart';

CSSFilterPresets.insXpro2(child: const Text('Your widget'));

Support effects:

Effect name Preview effect Sample code
origin CSSFilterPresets.origin(child: Image(...))
ins1977 CSSFilterPresets.ins1977(child: Image(...))
ins1977V2 CSSFilterPresets.ins1977V2(child: Image(...))
insAden CSSFilterPresets.insAden(child: Image(...))
insAmaro CSSFilterPresets.insAmaro(child: Image(...))
insAshby CSSFilterPresets.insAshby(child: Image(...))
insBrannan CSSFilterPresets.insBrannan(child: Image(...))
insBrooklyn CSSFilterPresets.insBrooklyn(child: Image(...))
insClarendon CSSFilterPresets.insClarendon(child: Image(...))
insDogpatch CSSFilterPresets.insDogpatch(child: Image(...))
insEarlybird CSSFilterPresets.insEarlybird(child: Image(...))
insGingham CSSFilterPresets.insGingham(child: Image(...))
insHelena CSSFilterPresets.insHelena(child: Image(...))
insHudson CSSFilterPresets.insHudson(child: Image(...))
insInkwell CSSFilterPresets.insInkwell(child: Image(...))
insInkwellV2 CSSFilterPresets.insInkwellV2(child: Image(...))
insJuno CSSFilterPresets.insJuno(child: Image(...))
insKelvin CSSFilterPresets.insKelvin(child: Image(...))
insLark CSSFilterPresets.insLark(child: Image(...))
insLofi CSSFilterPresets.insLofi(child: Image(...))
insLudwig CSSFilterPresets.insLudwig(child: Image(...))
insMaven CSSFilterPresets.insMaven(child: Image(...))
insMayfair CSSFilterPresets.insMayfair(child: Image(...))
insMoon CSSFilterPresets.insMoon(child: Image(...))
insMoonV2 CSSFilterPresets.insMoonV2(child: Image(...))
insNashville CSSFilterPresets.insNashville(child: Image(...))
insNashvilleV2 CSSFilterPresets.insNashvilleV2(child: Image(...))
insPerpetua CSSFilterPresets.insPerpetua(child: Image(...))
insPoprocket CSSFilterPresets.insPoprocket(child: Image(...))
insReyes CSSFilterPresets.insReyes(child: Image(...))
insRise CSSFilterPresets.insRise(child: Image(...))
insSierra CSSFilterPresets.insSierra(child: Image(...))
insSkyline CSSFilterPresets.insSkyline(child: Image(...))
insSlumber CSSFilterPresets.insSlumber(child: Image(...))
insStinson CSSFilterPresets.insStinson(child: Image(...))
insSutro CSSFilterPresets.insSutro(child: Image(...))
insToaster CSSFilterPresets.insToaster(child: Image(...))
insToasterV2 CSSFilterPresets.insToasterV2(child: Image(...))
insValencia CSSFilterPresets.insValencia(child: Image(...))
insVesper CSSFilterPresets.insVesper(child: Image(...))
insWalden CSSFilterPresets.insWalden(child: Image(...))
insWaldenV2 CSSFilterPresets.insWaldenV2(child: Image(...))
insWillow CSSFilterPresets.insWillow(child: Image(...))
insXpro2 CSSFilterPresets.insXpro2(child: Image(...))

Similar to CSSFilter, we provide the apply method for CSSFilterPresets to invoke presets consistently, and apply additionally supports setting the intensity of the filter effect used. To do so:

/// You can replace the value parameter with any of the supported effects.
CSSFilterPresets.apply(
  child: YourWidget,
  value: CSSFilterPresets.insNashville, 
  strength: 0.7
);

Customize your own filter preset

CSSFilter provides the most basic filters, CSSFilterPresets collects the commonly used combinations of basic filters as presets, meaning you can also customize your own filter presets based on the basic filters.

customPreset({ required Widget child }) {
  return CSSFilter.apply(
    child: child, 
    value: CSSFilterMatrix().sepia(0.2).saturate(1.4)
  );
}

/// Used by CSSFilterPresets to set the intensity of the effect.
CSSFilterPresets.apply(
  child: YourWidget,
  value: customPreset,
  strength: 0.9
);

/// It also supports direct use.
customPreset(child: YourWidget);

More examples

For more usage examples, please check out the example project.

GitHub

View Github