How to draw an Arc in the middle of CustomPainter shape

Question

I am trying to draw the following shape using CustomPainter, I am looking for a way to make this shape as one shape (union), so for example using Stack with Container and half circle shape is not desired.

I have managed to paint the base rectangular shape as the following image shows, is it possible to build on top of this code to draw a half a circle in the middle ?

Container(
              height: 85,
              color: Colors.blueGrey,
              child: Stack(
                children: [
                  CustomPaint(
                    size: Size(size.width, 85),
                    painter: MyCustomPainter(),
                  )
                ],
              ),
            ),

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    var path = Path()..moveTo(0, 20);

    path.quadraticBezierTo(0, 0, 0, size.height * 0.5);
    path.quadraticBezierTo(0, 0, size.width * 0.2, 0);

    path.quadraticBezierTo(size.width, 0, size.width * 0.8, 0);
    path.quadraticBezierTo(size.width, 0, size.width, size.height * 0.5);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

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

score 2 · Accepted Answer · answered Oct 06 '22 at 19:49

While the question about using union operation, I am focusing on

 canvas.drawPath(
        Path.combine(PathOperation.union, path1, circlePath), paint);

The current paint takes full height and doesnt maintain the ration based on your desire result. I am using Rect on Path to demonstrating the union operation. Change the size/value according to your needs.

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    final double base = size.height * .4;

    const corner = Radius.circular(16);

    final path1 = Path()
      ..addRRect(
        RRect.fromLTRBAndCorners(0, base, size.width, size.height,
            topLeft: corner, topRight: corner),
      );

    final center = Offset(size.width / 2, size.height / 2);

    final radius = size.height / 2;

    final circlePath = Path()
      ..addOval(Rect.fromCircle(center: center, radius: radius));

    canvas.drawPath(
        Path.combine(PathOperation.union, path1, circlePath), paint);
  }

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

More about CustomPaint

Thanks for the answer, do you know a way to allow the radius of the circle to be greater than `size.height/2` without overflowing from the bottom ? — Shady Aziza, Oct 06 '22 at 20:59
Yea, you can change the size from `radius = size.height / 2`. You can play with it — Md. Yeasin Sheikh, Oct 07 '22 at 06:17
I understand, but if you do so, a full circle is going to be painted which will overflow outside the desired shape from the bottom — Shady Aziza, Oct 07 '22 at 08:29
By default, paint will be visible outside it's area, If it is cut-off check parent widget clipBehavior and set it to none. — Md. Yeasin Sheikh, Oct 07 '22 at 09:49

How to draw an Arc in the middle of CustomPainter shape

1 Answers1