How to give shadow to a custom painted circle in flutter

Question

I am trying to make a circle appear more material. So I want to give it a shadow of some sort how do I do it with the Paint class in flutter

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

Answer 1

You can use a MaskFilter to create shadow effect. Just draw a circleB with slightly bigger radius using MaskFilter Paint before drawing your real circleA, you can get a circleA with shadow effect.

Check out this circle drew with below codes.

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;
  }
}