【译】像 CSS 一样在 Flutter 里应用滤镜效果

前言

在 CSS 世界里，我们可以非常方便地通过 filter 属性给任意组件和元素添加滤镜效果，现在我们让 Flutter 也支持这样玩了。(PS: 文章老早就想发了，无奈中间插了太多事情拖到今天)

为何要造这个轮子

Flutter 提供了丰富的绘制接口，你可以基于画布实现几乎任何定制效果，但对于应用开发而言，这些接口太底层了，使用上很繁琐，需要大量查询文档资料才能实现我们想要的效果。

即使借助框架本身提供的 BackdropFilter 和 ShaderMask 来实现滤镜效果，也要求你需要非常熟悉画布绘制，混合模式的应用以及不断地纠结和尝试各种参数和数值。有没有简便高效，给力点的解决方案？

抱着疑问向搜索引擎和社区寻找答案，突然桌面的 CSS Secrets 给了我想法。Web 领域有 CSS 滤镜和混合模式，它们的声明式 API 可以及其简单地应用滤镜效果，并且社区已有了大量案例和效果可供借鉴，比如：CSSgram 项目。

CSS Filter for Flutter

我们最终决定为 Flutter 设计类似于 CSS 滤镜一样使用简便的工具库，当时我们正在处理 iofod 生成 Flutter 代码的需求，在项目中实现了 CSS Filter for Flutter 的核心代码，因此得名 css_filter。

IFstruct 解析器支持从 iofod 可视化编辑的项目中生成 flutter 工程代码。我们将 CSS 滤镜模块代码独立出来，并为其扩充了许多预设效果，形成了目前的工具库。

我们知道这个 package 绝不仅仅在 iofod 的项目里起作用，其他使用 Flutter 的小伙伴肯定也需要这样的工具，应用到合适的地方，因此我们利用空闲时间处理所有开发测试的工作，并将其开源。

怎么玩

之前的事情如今变得十分简单，如果你想要在 Flutter 对任何组件应用滤镜效果，只需要引入包并调用即可：

import 'package:css_filter/css_filter.dart';
CSSFilter.contrast(child: YourWidget, value: 1.5);复制代码

可应用于任何 Widget 上：

工具库支持以下基本滤镜:

• contrast()

• grayscale()

• sepia()

• hueRotate()

• brightness()

• saturate()

• invert()

• blur()

• opacity()

像应用 CSS 滤镜一样，你可以在 flutter 中组合和叠加这些滤镜。通过CSSFilter.apply方法与CSSFilterMatrix类组合即可叠加效果。假设你通过任意在线滤镜工具生成，或者从社区找到这样一段 CSS 代码：

xxx {  filter: grayscale(1.0) sepia(0.8) invert(0.9) opacity(0.9);}复制代码

那么在 Flutter 对应的实现就是：

CSSFilter.apply(  child: YourWidget,  value: CSSFilterMatrix().grayscale(1.0).sepia(0.8).invert(0.9).opacity(0.9));复制代码

效果的同等实现，我相信你再不会想回到从前，写出如下代码：

Opacity(  opacity: 0.9  child: ColorFiltered(    colorFilter: ColorFilter.matrix(<double>[       -1,   0,  0, 0, 255,        0,  -1,  0, 0, 255,        0,   0, -1, 0, 255,        0,   0,  0, 1,   0,    ]),    child: ColorFiltered(      colorFilter: ColorFilter.matrix(<double>[        0.393, 0.769, 0.189, 0, 0,        0.349, 0.686, 0.168, 0, 0,        0.272, 0.534, 0.131, 0, 0,        0,     0,     0,     1, 0,      ]),      child: ColorFiltered(        colorFilter: ColorFilter.matrix(<double>[          0.2126, 0.7152, 0.0722, 0, 0,          0.2126, 0.7152, 0.0722, 0, 0,          0.2126, 0.7152, 0.0722, 0, 0,          0,      0,      0,      1, 0,        ]),        child: YourWidget      )    )  ));
复制代码

斯国以，摸鱼的时间又多了几分。该项目的测试用例和文档注释齐全，请放心食用：)

更多的用法与案例，可以查看我们的 Github 主页。

Instagram 滤镜

Instagram 曾经为图片美化设计了很多滤镜效果，CSSgram 项目十分牛逼，直接用 CSS 给实现了，instagram.css 项目在基础上补充了更多滤镜效果。我们将这两个库结合起来封装了一系列预设，可以通过 CSSFilterPresets 类去调用。

诺，现在能够用仅一行代码来使用这批滤镜效果。

CSSFilterPresets.insXpro2(child: const Text('Your widget'));复制代码

以下是我们支持的 Instagram 滤镜：

很多图片工具给我们带来灵感，CSS Filter for Flutter 将在下一个大版本补充更多滤镜，敬请期待！

计划

我们知道 CSS3 已经很成熟了，光 CSS 滤镜生成工具就有很多，我们可以先使用它们来生成预览效果，然后转化成 flutter 代码。当然这是一个很好的替代方案，项目下一步的工作重点是推出可视化工具，支持直接生成 flutter 片段代码，让开发者可以一键复制使用。

对项目感兴趣的小伙伴欢迎联系我~

Enjoy it!

参考

• Github 主页
  

• iofod 官网
  

• pub 主页
  

• CSS 滤镜
  

• CSS Filter for Flutter: Apply filters in Flutter as you use CSS
  

• BackdropFilter
  

• ShaderMask
  

• BlendMode