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

 

前言

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

为何要造这个轮子

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

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

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