How to draw a sickle using widget in flutter

Question

I usually used to export as an SVG file, but I want to know if it is possible to draw this shape using only widget

Like this https://i.stack.imgur.com/ZCJZa.png

Also how to make statistic usage as the above pic

Answer 1

You can use this tool https://www.flutterclutter.dev/tools/svg-to-flutter-path-converter

Which convert your SVG file into CustomPainter Class in flutter

Edit: If you don't have SVG file. Simple draw to Circle intersected with each other then clip the drawing in CustomPainter class

class Sickle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint outerPaint = Paint(); //Border Color
    Paint innerPaint = Paint(); //Blind it with backgroun Color

    outerPaint.color = Colors.lightBlue;
    innerPaint.color = Colors.white;

    // Clip the circle
    canvas.clipRect(Rect.fromLTWH(
        size.width / 2 - 20, size.height / 2 - 20, size.width, size.height));

    //Border Circle
    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), size.width / 2, outerPaint);
    // Inner Circle
    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), size.width / 3, innerPaint);
  }

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