?
前言
在 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
作者：iofod
链接：https://juejin.cn/post/7139725311117099015
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。