Flutter光晕虚化背景这样做超简单

UI设计了一个带有虚化背景的效果，由于不想直接用切图，这里浅试一下，思路清晰了之后发现还是很简单的。先上图

页面UI分析

从图中可以看出全图是由上到下渐变的效果。同时在顶部有三个虚化的光晕。

尝试

本来想着用着色器ShaderMask配合RadialGradient来完成的，可以看下其使用方法

ShaderMask(
    shaderCallback: (Rect bounds) {
      return RadialGradient(
              center: Alignment.center, radius: 0.5,
              colors: [ Colors.red, Colors.yellow, Colors.green ],
              stops: [0.1, 0.5, 0.9],
              tileMode: TileMode.mirror)
          .createShader(bounds);
    },
    child: Container());

发现并不能做到多个光晕同时显示（或者是我没有想到多个着色器组合使用的方法），在这里折腾了很久之后最后还是放弃了。

茅塞顿开

后来想到既然是多个光晕，为什么我不能把光晕画好统一覆盖高斯模糊效果呢？？到这里之后估计很多人都明白了怎么做了，明白之后只能说卧槽！！太简单了吧。下面贴个代码

Widget _buildBackCover() {
  return Positioned(
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    child: Container(
    //整体渐变色
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[
                Color(0xFF677897),
                Color(0xFF6C6D97),
              ])),
      child: Stack(
        children: [
        //色块1
          Positioned(
            top: 26.w,
            right: 63.w,
            child: Container(
              height: 130.w,
              width: 130.w,
              decoration: BoxDecoration(
                  color: Color(0xFF9A8AA7),
                  borderRadius: BorderRadius.all(Radius.circular(65.w))),
            ),
          ),
          //色块2
          Positioned(
            top: 117.w,
            left: -35.w,
            child: Container(
              height: 130.w,
              width: 130.w,
              decoration: BoxDecoration(
                  color: Color(0xFFA7948A),
                  borderRadius: BorderRadius.all(Radius.circular(65.w))),
            ),
          ),
          //色块3
          Positioned(
            top: 52.w,
            right: -14.w,
            child: Container(
              height: 130.w,
              width: 130.w,
              decoration: BoxDecoration(
                  color: Color(0xFF505EB4),
                  borderRadius: BorderRadius.all(Radius.circular(65.w))),
            ),
          ),
          //覆盖的模糊效果
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
            child: Container(
              color: Colors.white.withAlpha(0),
            ),
          )
        ],
      ),
    ),
  );
}

完全搞定上面的效果，另附覆盖模糊之前的图。

这样就实现了UI的需求，真的超级简单！！！