I am creating an object detection application in Flutter using tflite object detection model.

The users can upload images in any aspect ratio, and I am using the dart image package to draw frames and labels for the detected objects. The problem is because it’s drawing in pixel, so the thickness and font size are affected by the image size as well.

I manage to scale the thickness of the frames by calculating the relative image width. However, I could not find a good way to scale the font size of drawString. What I want to achieve is to draw the object labels in consistent size.

Here’s some of my code:

     // Scale bounding box coordinates back to original size
        final x1 = (locations[i][1] * scaleFactorX).toInt();
        final y1 = (locations[i][0] * scaleFactorY).toInt();
        final x2 = (locations[i][3] * scaleFactorX).toInt();
        final y2 = (locations[i][2] * scaleFactorY).toInt();

        // Rectangle drawing
        img.drawRect(
          image,
          x1: x1,
          y1: y1,
          x2: x2,
          y2: y2,
          color: img.ColorRgb8(0, 255, 0),
          thickness: relativeThickness,
        );

        // Label drawing
        img.drawString(
          image,
          '$c ${'${(scores[i] * 100).toStringAsFixed(0)}%'}',
          font: arial48,
          x: x1,
          y: y1,
          color: img.ColorRgb8(255, 255, 255),
        );

I was thinking of preparing a few custom Bitmapfont of different sizes, and select different font based on the relative font size calculated. However I would really appreciate if there’s better way to draw string onto image.