likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 102

前言

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

为何要造这个轮子

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

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

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

抱着疑问向搜索引擎和社区寻找答案，突然桌面的 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上：

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

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

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

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

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

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

Instagram 滤镜

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

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

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

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

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

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

计划

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

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

Enjoy it!

参考

转载自:https://juejin.cn/post/7139725311117099015
评论
请登录