Solved: How to draw circle with 4 lines equal distance apart using drawLine() and drawCircle() in Flutter

Question

Asked by Rogerto on January 25, 2023 (source).

How do I draw four lines across diameter on top of a circle so that it divides the circle up into equal parts (similar to a pizza)? I can so far use CustomPaint to create circle and draw one line, but each time I try to draw the other lines, they either overlap the bounds of the circle or are not equally distributed. Below is image of my current progress and code.

enter image description here

import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    
    
    double degToRad(num deg) {
      return deg * (pi / 180.0).toDouble();
    }

    var paint = Paint();
    paint.color = Colors.white;
    paint.strokeWidth = 5;

    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..style = PaintingStyle.fill;

  
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 150, paint1);

    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width, size.height / 2),
      paint,
    );
  }

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

Error Image: enter image description here

Answer

Question answered by Krishna A (source).

To draw four lines on top of a circle that divide the circle into equal parts, you can use the drawLine() method in conjunction with the drawCircle() method.

The total angle for a full circle is 360 degrees, so to divide the circle into four equal parts, each line should be drawn at an angle of 360 / 4 = 90 degrees from the center.

Example, change your paint() method to :

var paint = Paint();
    paint.color = Colors.white;
    paint.strokeWidth = 5;
    
    var center = Offset(size.width / 2, size.height / 2);
    var radius = 150;
    
    canvas.drawCircle(center, radius, paint1);

    canvas.drawLine(
      center,
      center + Offset(radius * cos(degToRad(0)), radius * sin(degToRad(0))),
      paint,
    );
    canvas.drawLine(
      center,
      center + Offset(radius * cos(degToRad(90)), radius * sin(degToRad(90))),
      paint,
    );
    canvas.drawLine(
      center,
      center + Offset(radius * cos(degToRad(180)), radius * sin(degToRad(180))),
      paint,
    );
    canvas.drawLine(
      center,
      center + Offset(radius * cos(degToRad(270)), radius * sin(degToRad(270))),
      paint,
    );
DART FLUTTER
SHARE: