CODEWITHSUNDEEP
flutter
najdat Akkad
najdat Akkad

Reputation: 195

Flutter Draw Ring

Please I'm trying to draw a ring using custom paint in flutter, is there any idea on how to implement it?

As I tried to implement it like this but it's not accepted as I need the shadow to be more professional:

Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        height: 180,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 2,
                                spreadRadius: 1,
                                offset: Offset(0, 2)),
                          ],
                        ),
                      ),
                      Container(
                        height: 150,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 2,
                                spreadRadius: 1,
                                offset: Offset(0, 2)),
                          ],
                        ),
                      ),
                    ],
                  ),

Upvotes: 0

Views: 815

Answers (1)

Vinay Jain
Vinay Jain

Reputation: 428

Yes it could be done easily using Custom Paint.

class MyHome extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        body: Center(
          child: Container(
            height:200,
            width:200,
            child:CustomPaint(
            painter:RingPainter(),
            ),
          ),
        ),
    );
  } 
}
class RingPainter extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    double height=size.height;
    double width=size.width;
    //Paint to draw ring shape    
    Paint paint=Paint()..color=Colors.green..strokeWidth=16.0
      ..style=PaintingStyle.stroke..strokeCap=StrokeCap.round;
    
    //defining Center of Box
    Offset center=Offset(width/2,height/2);
    //defining radius
    double radius=min(width/2,height/2);
    canvas.drawCircle(center,radius,paint);
  }

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

Upvotes: 2

Related Questions