Flutter Widget 之ImageFilter

Future支持图像处理的功能非常棒，你可以将图像以资源形象，或通过网络进行加载。

但是，如果您想以某种方式调整这些图像，添加旋转，倾斜甚至模糊，该怎么办呢？

Flutter使用ImageFilter类和BackdropFilter Widget组合为您提供了一种简单的方法。

BackdropFilter widget将ImageFilter和其子项作为参数，

BackdropFilter(
    filter: ImageFilter...
)

并将过滤器应用于子项下的widget。

首先，确定您想要的过滤器类型-用于变换的模糊和矩阵。

BackdropFilter(
    filter: ImageFilter.blur(
        sigmaX:5,
        sigmaY:5,
    ),
)

接下来，给该widget定义一个子项，但是注意，子项不会收到过滤器的影响，只有其下的widget会被影响。

这里给你一个有用的提示。要将过滤器应用与背景，但不再过滤器上呈现任何可见内容，那就使空容器作为子项。

BackdropFilter(
    filter: ImageFilter.blur(
        sigmaX:5,
        sigmaY:5,
    ),
    child: Container(
        color: Colors.black.withOpacity(0),    
    ),
)

如果您不确定如何开始，请尝试使用带有堆栈的BackdropFilters。

使用Positioned.fill确保过滤器完全覆盖其下的widget。

Stack(
    children: [
        DashWidget,
        Positioned.fill(
            child: BackdropFilter(
                filter: ImageFilter.blur(
                    sigmaX: 5,
                    sigmaY: 5,
                ),
                child: COntainer(
                    color: Colors.black.withOpacity(0),
                ),
            ),
        ),
    ],
)

而且您可以轻松地将过滤镜仅应用与某个部分，选择性地模糊您想要地任何内容。

Stack(
    children: [
        DashWidget,
        Positioned(top: 100, bottom: 150,
               left: 200, right: 100, 
            child: BackdropFilter(
                filter: ImageFilter.blur(
                    sigmaX: 5,
                    sigmaY: 5,
                ),
                child: COntainer(
                    color: Colors.black.withOpacity(0),
                ),
            ),
        ),
    ],
)

如果想了解有关ImageFilter的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址