Flutter 的 CSS 滤镜

在 Flutter 中使用 CSS 滤镜效果。

Version Build Status

IFstruct 解析器 支持从 iofod 的可视化编辑项目中生成 Flutter 代码。我们已分离其滤镜模块代码，并添加了许多预设效果，形成了当前的 Flutter CSS 滤镜，它方便了所有 Flutter 项目使用 Web 的优秀设计：CSS 滤镜。

特点

  • 简单高效
  • 支持多种滤镜效果叠加
  • 丰富的预设效果。
  • 全平台支持
  • 自定义您的效果
  • 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 调用的预设。

import 'package:css_filter/css_filter.dart';

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

支持的效果

效果名称 效果预览 示例代码
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(...))

与 CSSFilter 类似，我们为 CSSFilterPresets 提供了 apply 方法，以便一致地调用预设，并且 apply 还支持设置所用滤镜效果的强度。方法如下：

/// You can replace the value parameter with any of the supported effects.
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)
  );
}

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

更多示例

有关更多用法示例，请查看 示例项目。

GitHub

查看 Github