在 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,
      );
    }
  }
}

效果如下：