How to give shadow to a custom painted circle in flutter How to give shadow to a custom painted circle in flutter dart dart

How to give shadow to a custom painted circle in flutter


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


You could also use the drawShadow method.

@overridevoid paint(Canvas canvas, Size size) {  var path = Path();  var myPaint = Paint();  var center = Offset(size.width / 2, size.height / 2);  myPaint.color = Color(0xff007AFF);  path.addOval(Rect.fromCircle(center: center, radius: 50.0));  canvas.drawShadow(path, Color(0xff000000), 3, true);  canvas.drawPath(path, myPaint);}

Result:

circle with shadow


Wrap it in a Boxdecoration.It has BoxShadow property.

You can follow this link.

   new Container(    decoration: new BoxDecoration(      color: Colors.white,      border: new Border.all(          color: Colors.green,          width: 5.0,          style: BorderStyle.solid      ),      borderRadius: new BorderRadius.only(        topLeft: new Radius.elliptical(40.0, 10.0),        bottomLeft: new Radius.circular(20.0),      ),      boxShadow: [        new BoxShadow(          color: Colors.red,          offset: new Offset(20.0, 10.0),        )      ],      image: new DecorationImage(          image: new AssetImage('assets/images/JL-Logo-150.png'),      )