flutter - 如何在 flutter 中为自定义绘制的圆圈提供阴影

Question

我试图让一个圆圈看起来更物质。所以我想给它一个阴影，我如何在 flutter 中使用 Paint 类来做到这一点

thumbPaint = Paint()
..color = Colors.white,
..style = PaintingStyle.fill;

Answer 1

您可以使用 MaskFilter来创造阴影效果。在绘制真正的circleA之前，只需使用MaskFilter Paint绘制一个半径稍大的circleB，您就可以获得带有阴影效果的circleA。

看看这个 circle用下面的代码绘制。

class Painter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    double radius = 100.0;
    canvas.translate(size.width/2, size.height/2); 
    Offset center = Offset(0.0, 0.0);
    // draw shadow first
    Path oval = Path()
        ..addOval(Rect.fromCircle(center: center, radius: radius+10));
    Paint shadowPaint = Paint() 
        ..color = Colors.black.withOpacity(0.3)
        ..maskFilter = MaskFilter.blur(BlurStyle.normal, 50);
    canvas.drawPath(oval, shadowPaint);
    // draw circle
    Paint thumbPaint = Paint()
        ..color = Colors.white
        ..style = PaintingStyle.fill;
    canvas.drawCircle(center, radius, thumbPaint);
  }

  @override
  bool shouldRepaint(Painter oldDelegate) {
    return false;
  }
}