来一起实现一个按钮效果

200 阅读1分钟
image.png

效果点:1 按钮外部是白色,里面的颜色在四周像是渐变减弱

2 有阴影并且阴影看着很自然(相对于直接设置BoxShadow)

实现的效果

image.png

没有直接用BoxShadow,BoxShadow也是用..maskFilter = MaskFilter.blur(BlurStyle.normal, 10); api 来实现的阴影,我这里就是直接用的这个api进行绘制。

主要绘制代码

      
class ShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
// 1. 创建绘制路径(圆形)
    var rect = RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(size.height/2));
    final path = Path()..addRRect(rect);
    final path2 = Path()..addRRect(rect.deflate(5));

    final path3 = Path()..addRRect(rect.deflate(10));

    //绘制底部阴影
    //path3 比rect 小 这样设置outer模式的时候外散的光超出组件的部分就看着很柔和
    final Paint paint3 = Paint()
      ..color = Color.fromRGBO(249, 142, 119, 1)
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, 30);
    canvas.drawPath(path3, paint3);

    //绘制白色底色
    final Paint paint = Paint()
      ..color = Colors.white;
    canvas.drawPath(path, paint);

    //绘制中心颜色 
    //就可以让四周的颜色渐变
    final Paint paint1 = Paint()
      ..color = Color.fromRGBO(249, 142, 119, 1)
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 10);

    canvas.drawPath(path2, paint1);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}