CODEWITHSUNDEEP
flutterflutter-layout
Rahadur
Rahadur

Reputation: 129

How Can I Create Arc with Radius CustomPainter like this Mockup

Please tell me how can I create this Arc with Radius CustomPainter UI Component like this Mockup Design?

There must be a gap between Start & End angle.

Arc with Radius

Code:

class ArcPainter extends CustomPainter {
  final double angle = 310.0;

  double toAngle(double angle) => angle * pi / 180.0;

  @override
  void paint(Canvas canvas, Size size) {
    final Offset center = Offset(size.width / 2.0, size.height / 2.0);
    final double radius = size.width / 3.0;

    Paint paint = Paint()
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 8.0
      ..style = PaintingStyle.stroke
      ..color = Colors.pink;

    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      toAngle(110.0),
      toAngle(angle),
      true,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Problem:

Here is the current output for my Arc with Radius. The problem is that borders are showing in the arc gap. I want to remove the border in the gap.

enter image description here

Upvotes: 1

Views: 397

Answers (2)

Kherel
Kherel

Reputation: 16187

you can create drawPath instead of drawArc

enter image description here

 @override
  void paint(Canvas canvas, Size size) {
    final center = size.center(Offset.zero);

    final oval = Rect.fromCenter(
      center: center,
      width: size.width,
      height: size.height,
    );

    var progressPath = _path(oval, 200);
    var progressPaint = _paint(Color(0xFF8987F7));

    var backgroundPath = _path(oval, 280);
    var backgroundPaint = _paint(Color(0xFF3a329e));

    canvas
      ..drawPath(backgroundPath, backgroundPaint)
      ..drawPath(progressPath, progressPaint);
  }

  Paint _paint(Color color) {
    return Paint()
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 15.0
      ..style = PaintingStyle.stroke
      ..color = color;
  }

  Path _path(Rect oval, double angle) {
    return Path()
      ..addArc(
        oval,
        toAngle(130),
        toAngle(angle),
      );
  }

Upvotes: 3

nvoigt
nvoigt

Reputation: 77285

You told it to close the gap using the center. You can tell it to not do so:

canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      toAngle(110.0),
      toAngle(angle),
      false, // this is called "useCenter" for a reason...
      paint,
    );

Upvotes: 1

Related Questions