iofod/flutter_css_filter

CSS Filter for Flutter

English | 简体中文

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.