在 Android 中,高斯模糊是意见挺费劲的事儿,但是在 Flutter 中,却只是一个 Widget 就可以解决的事儿(嗯,真香...)

Flutter 提供了 BackdropFilter 来帮助我们实现高斯模糊,它会将过滤器应用于现有绘制内容然后再绘制子级的 Widget。

过滤器将应用于其父级或祖先窗口 Widget 剪辑内的所有区域。 如果没有剪辑,则滤镜将应用于全屏。

看构造方法:

  const BackdropFilter({
    Key key,
    @required this.filter,
    Widget child,
  })
  • filter,在绘制 child 内容之前,会将 filter 设置的过滤器应用于现有的内容,通常使用 ImageFilter.blur 来创建模糊效果。
  • child,绘制的子内容。

对于 ImageFilter.blur 的取值来说,0 是完全透明,数值越大,越模糊。

一个简单的示例:

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
  bool isBlur = true;
  double blurValue = 5.0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold Test'),
      ),
      body: Center(
        child: ClipRect(
          child: Container(
            width: 400,
            height: 400,
            decoration: BoxDecoration(
                image: DecorationImage(
              image: AssetImage("assets/images/girl.png"),
              fit: BoxFit.fill,
            )),
            child: BackdropFilter(
              filter: ui.ImageFilter.blur(
                sigmaX: blurValue,
                sigmaY: blurValue,
              ),
              child: getChild(),
            ),
          ),
        ),
      ),
    );
  }

  Widget getChild() {
    if (isBlur) {
      return Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        child: GestureDetector(
          onTap: () {
            isBlur = false;
            blurValue = 0;
            setState(() {});
          },
          child: Text(
            "点我查看",
            style: TextStyle(backgroundColor: Colors.yellow),
          ),
        ),
      );
    } else {
      return Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
      );
    }
  }
}

效果如下:

results matching ""

    No results matching ""