UI视觉效果图来自花瓣，由于没有标注和切图，就不追求1:1复刻了。实现的重点是音乐封面部分。拆解一下需求，一张图片被裁成同心圆环，背后有一个高斯模糊的阴影。

最终实现效果如下：

找张封面图，就开始今天的练习。

图片裁成同心圆环

图片裁成圆形的方式有很多，扒拉下来就像孔乙己告诉你茴字有四种写法。

其中有一种切圆形图片的方式是使用ClipPath，官方文档中已经指出按照Path裁切是耗性能的，只是用来切圆形就有点大炮打蚊子了。

Widget _buildAudioCoverWidget(Image image) {
    return ClipPath.shape(
      shape: const CircleBorder(),
      child: image,
    );
  }
}

ClipPath是根据特定的path裁切图片，拿到Path后，那就是海阔凭鱼跃，天高任鸟飞。发挥想象力就好了。

不使用ClipPath.shape的静态方法， 在构造ClipPath时需要一个clipper参数，我们看类型。

CustomClipper<Path>? clipper;

自定义的CustomClipper需要两个实现方法。其中shouldReclip方法在接收到不同的clipper对象时判断是否需要重新Clip，这里用不到其他裁切效果，直接返回false。

class MyPathClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return false;
  }
}

关键的getClip方法，才是操纵path的地方。 先给path切一个圆形的轮廓。

  Path getClip(Size size) {
    var path = Path();
    path.addOval(Offset.zero & size);
    return path;
  }

其实一通费劲下来才裁出了个圆形图片，还真不如一开始的三行代码。

Flutter中的Path和Android的很像，打洞关键在于PathFillType.evenOdd，这样path中添加两个圆就能达到同心圆环的效果了。

最终我们的自定义Clipper长这个样子：

class MyPathClipper extends CustomClipper<Path> {
  static const double hollowRatio = 1 / 4;
  @override
  Path getClip(Size size) {
    var path = Path();
    path.addOval(Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: size.width * hollowRatio,
        height: size.height * hollowRatio));
    path.addOval(Offset.zero & size);
    path.fillType = PathFillType.evenOdd;
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return false;
  }
}

高斯模糊

使用ImageFiltered可以达到高斯模糊的效果。

Widget _buildAudioCoverWidget(Image image) {
    return ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: ClipPath(
        clipper: MyPathClipper(),
        child: image,
      ),
    );
  }
}

但这么写有两个小问题，一个是边缘非常的突兀，另一个是边缘中间有一点黑黑的。

边缘突兀是因为高斯模糊处理图片后，模糊半径会让图片看着好像外溢一般，这里加个padding把位置空出来。边缘中间黑黑的是ImageFilter的tileMode属性，默认是TileMode.clamp不太自然，换成TileMode.decal会好很多。

Widget _buildAudioCoverWidget(Image image) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: ImageFiltered(
        imageFilter:
            ImageFilter.blur(sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal),
        child: ClipPath(
          clipper: MyPathClipper(),
          child: image,
        ),
      ),
    );
  }

这样我们就得到了一个看着比较顺眼的高斯模糊封面图。

阴影效果

使用Stack，叠放一个高斯模糊的图，再叠放一张原图。

这里使用了一个小技巧，先让Stack内部居中，再通过padding个别调整位置。

Widget _buildAudioCoverWidget(Image image) {
    var ring = SizedBox(
      width: 220,
      height: 220,
      child: ClipPath(
        clipper: MyPathClipper(),
        child: image,
      ),
    );
    return Stack(
      alignment: AlignmentDirectional.center,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(60, 60, 20, 20),
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(
                sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal),
            child: ring,
          ),
        ),
        ring,
      ],
    );
  }

动起来

通过添加RotationAnimation，让这个封面转起来，由于封面图和阴影同时转，所以动画加在了一开始的Image上。

var rotateImage = RotationTransition(
      turns: _controller,
      child: Image.asset(
        "images/01.webp",
        fit: BoxFit.cover,
      ),
    );

余下的不难，不再赘述了。