Drawing curved corner borders in Flutter with dart:ui Canvas

Question

I am using the https://pub.dev/packages/ncnn_yolox_flutter package for object detection in my Flutter app. I want the border outline of detections to look similar to the image below; curved corners only. (Different opacity not necessary, although if anyone knows how to draw that dynamically I would be interested).

What I'm looking for:

I currently have two options working.

1. Curved corners, but drawing the entire rectangle... Code and picture below (e references my detection results and drawRectPaint is my decoration):

final rect = ui.Rect.fromLTWH(
        e.x,
        e.y,
        e.width,
        e.height,
      );
      canvas.drawRRect(
        RRect.fromRectAndRadius(rect, Radius.circular(10.0)),
        drawRectPaint,
      );

2. Corners only but without the curve. (Code for just the top left corner below):

var topLeftPath = Path();

topLeftPath.addPolygon([
        Offset((e.x), (e.y + 40)),
        Offset((e.x), (e.y)),
        Offset((e.x + 40), (e.y)),
      ], false);

canvas.drawPath(
        topLeftPath,
        drawRectPaint,
      );

Answer 1

You have to use moveTo, lineTo and arcTo to draw border outlines with rounded corners. You need to adjust the values to your needs.

Try this:

topLeftPath.moveTo(e.x, 40);
topLeftPath.relativeLineTo(e.x, -20);
topLeftPath.arcTo(
  Rect.fromCenter(
    center: Offset(20,20), 
    width: 40, 
    height: 40
  ), math.pi, math.pi/2, false);
topLeftPath.relativeLineTo(20, e.y);
canvas.drawPath(topLeftPath,drawRectPaint);

Answer 2

Clever use of PathFillType.evenOdd to darken the outside, and arcTo for the outer lines:

https://dartpad.dartlang.org/?id=20afacc59439722a28c2f7ccea4782bf

class ViewfinderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final canvasRect = Offset.zero & size;
    const rectWidth = 300.0;
    final rect = Rect.fromCircle(
      center: canvasRect.center,
      radius: rectWidth / 2,
    );
    const radius = 16.0;
    const strokeWidth = 6.0;
    const extend = radius + 24.0;
    const arcSize = Size.square(radius * 2);

    canvas.drawPath(
      Path()
        ..fillType = PathFillType.evenOdd
        ..addRRect(
          RRect.fromRectAndRadius(
            rect,
            const Radius.circular(radius),
          ).deflate(strokeWidth / 2),
        )
        ..addRect(canvasRect),
      Paint()..color = Colors.black26,
    );

    canvas.save();
    canvas.translate(rect.left, rect.top);
    final path = Path();
    for (var i = 0; i < 4; i++) {
      final l = i & 1 == 0;
      final t = i & 2 == 0;
      path
        ..moveTo(l ? 0 : rectWidth, t ? extend : rectWidth - extend)
        ..arcTo(
            Offset(l ? 0 : rectWidth - arcSize.width,
                    t ? 0 : rectWidth - arcSize.width) &
                arcSize,
            l ? pi : pi * 2,
            l == t ? pi / 2 : -pi / 2,
            false)
        ..lineTo(l ? extend : rectWidth - extend, t ? 0 : rectWidth);
    }
    canvas.drawPath(
      path,
      Paint()
        ..color = Colors.deepOrange
        ..strokeWidth = strokeWidth
        ..style = PaintingStyle.stroke,
    );
    canvas.restore();
  }

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