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

彻底搞定上面的作用，另附掩盖含糊之前的图。