CSS Filter for Flutter

Use CSS filter effects on Flutter.

Version Build Status

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 origin CSSFilterPresets.origin(child: Image(...))
ins1977 ins1977 CSSFilterPresets.ins1977(child: Image(...))
ins1977V2 ins1977V2 CSSFilterPresets.ins1977V2(child: Image(...))
insAden insAden CSSFilterPresets.insAden(child: Image(...))
insAmaro insAmaro CSSFilterPresets.insAmaro(child: Image(...))
insAshby insAshby CSSFilterPresets.insAshby(child: Image(...))
insBrannan insBrannan CSSFilterPresets.insBrannan(child: Image(...))
insBrooklyn insBrooklyn CSSFilterPresets.insBrooklyn(child: Image(...))
insClarendon insClarendon CSSFilterPresets.insClarendon(child: Image(...))
insDogpatch insDogpatch CSSFilterPresets.insDogpatch(child: Image(...))
insEarlybird insEarlybird CSSFilterPresets.insEarlybird(child: Image(...))
insGingham insGingham CSSFilterPresets.insGingham(child: Image(...))
insHelena insHelena CSSFilterPresets.insHelena(child: Image(...))
insHudson insHudson CSSFilterPresets.insHudson(child: Image(...))
insInkwell insInkwell CSSFilterPresets.insInkwell(child: Image(...))
insInkwellV2 insInkwellV2 CSSFilterPresets.insInkwellV2(child: Image(...))
insJuno insJuno CSSFilterPresets.insJuno(child: Image(...))
insKelvin insKelvin CSSFilterPresets.insKelvin(child: Image(...))
insLark insLark CSSFilterPresets.insLark(child: Image(...))
insLofi insLofi CSSFilterPresets.insLofi(child: Image(...))
insLudwig insLudwig CSSFilterPresets.insLudwig(child: Image(...))
insMaven insMaven CSSFilterPresets.insMaven(child: Image(...))
insMayfair insMayfair CSSFilterPresets.insMayfair(child: Image(...))
insMoon insMoon CSSFilterPresets.insMoon(child: Image(...))
insMoonV2 insMoonV2 CSSFilterPresets.insMoonV2(child: Image(...))
insNashville insNashville CSSFilterPresets.insNashville(child: Image(...))
insNashvilleV2 insNashvilleV2 CSSFilterPresets.insNashvilleV2(child: Image(...))
insPerpetua insPerpetua CSSFilterPresets.insPerpetua(child: Image(...))
insPoprocket insPoprocket CSSFilterPresets.insPoprocket(child: Image(...))
insReyes insReyes CSSFilterPresets.insReyes(child: Image(...))
insRise insRise CSSFilterPresets.insRise(child: Image(...))
insSierra insSierra CSSFilterPresets.insSierra(child: Image(...))
insSkyline insSkyline CSSFilterPresets.insSkyline(child: Image(...))
insSlumber insSlumber CSSFilterPresets.insSlumber(child: Image(...))
insStinson insStinson CSSFilterPresets.insStinson(child: Image(...))
insSutro insSutro CSSFilterPresets.insSutro(child: Image(...))
insToaster insToaster CSSFilterPresets.insToaster(child: Image(...))
insToasterV2 insToasterV2 CSSFilterPresets.insToasterV2(child: Image(...))
insValencia insValencia CSSFilterPresets.insValencia(child: Image(...))
insVesper insVesper CSSFilterPresets.insVesper(child: Image(...))
insWalden insWalden CSSFilterPresets.insWalden(child: Image(...))
insWaldenV2 insWaldenV2 CSSFilterPresets.insWaldenV2(child: Image(...))
insWillow insWillow CSSFilterPresets.insWillow(child: Image(...))
insXpro2 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