效果点:1 按钮外部是白色,里面的颜色在四周像是渐变减弱
2 有阴影并且阴影看着很自然(相对于直接设置BoxShadow)
实现的效果
没有直接用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;
}