CSS Filter for Flutter

在 Flutter 上使用 CSS 滤镜效果。

IFstruct parser 支持从 iofod 可视化编辑的项目生成 Flutter 代码。我们将其滤镜模块代码分离，并添加了许多预设效果，形成了现在的工具库，方便了所有 Flutter 项目使用 Web 的优秀设计：CSS 滤镜。

特色

• 简洁高效的 API
• 支持多滤镜叠加
• 丰富的预设
• 全平台支持
• 自定义效果
• Null-safety

起步

导入依赖后，可以通过CSSFilter使用基本滤镜。

import 'package:css_filter/css_filter.dart';

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

支持的基础滤镜如下：

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

你可以像使用 CSS 滤镜一样在 Flutter 中组合叠加使用这些滤镜。将 CSSFilter.apply 与 CSSFilterMatrix() 结合使用。如：

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

注意： 链式调用的顺序代表了滤镜的应用顺序，应用顺序会影响最终的结果。

使用预设

CSSgram 项目十分牛逼，给 CSS 世界带来了类 Instagram 滤镜，instagram.css 对其补充了更多滤镜效果。我们将这两个库结合起来封装了一系列预设，可以通过 CSSFilterPresets 调用。

支持的预设效果和预览：

预设	预览	示例代码
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(...))

与 CSSFilter 类似，我们为 CSSFilterPresets 提供了 apply 方法来统一调用预设，apply 还支持设置滤镜的强度。比如：

/// 可以将 value 参数替换为任何支持的效果。
CSSFilterPresets.apply(
  child: YourWidget,
  value: CSSFilterPresets.insNashville, 
  strength: 0.7
);

自定义滤镜预设

CSSFilter提供了最基本的滤镜，CSSFilterPresets收集了常用的滤镜组合作为预设，也就是说你也可以根据基本滤镜来自定义滤镜预设。

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

/// 利用 CSSFilterPresets 设置效果的强度。
CSSFilterPresets.apply(
  child: YourWidget,
  value: customPreset,
  strength: 0.9
);

/// 也支持直接调用。
customPreset(child: YourWidget);

更多示例

更多使用示例，请查看 example