renderBoxesOnImage method

Widget renderBoxesOnImage(File image, List<ResultObjectDetection?> recognitions, { Color? boxesColor, bool showPercentage = true, })

Renders a list of boxes on an image.

The image parameter is the file representing the image. The recognitions parameter is a list of ResultObjectDetection objects containing information about the boxes to be rendered. The boxesColor parameter is the color of the boxes. If null, the color will be chosen based on the label. The showPercentage parameter determines whether to show the percentage value in the label.

Returns a Widget that renders the image with the boxes.

Implementation

Widget renderBoxesOnImage(
    File image, List<ResultObjectDetection?> recognitions,
    {Color? boxesColor, bool showPercentage = true}) {
  return LayoutBuilder(builder: (context, constraints) {
    debugPrint(
        'Max height: ${constraints.maxHeight}, max width: ${constraints.maxWidth}');

    // Calculate the scaling factors for the boxes based on the layout constraints
    double factorX = constraints.maxWidth;
    double factorY = constraints.maxHeight;

    return Stack(
      children: [
        Positioned(
          left: 0,
          top: 0,
          width: factorX,
          height: factorY,
          child: Image.file(
            image,
            fit: BoxFit.fill,
          ),
        ),
        ...recognitions.map((re) {
          if (re == null) {
            return Container();
          }
          Color usedColor;
          if (boxesColor == null) {
            //change colors for each label
            usedColor = Colors.primaries[
                ((re.className ?? re.classIndex.toString()).length +
                        (re.className ?? re.classIndex.toString())
                            .codeUnitAt(0) +
                        re.classIndex) %
                    Colors.primaries.length];
          } else {
            usedColor = boxesColor;
          }

          return Positioned(
            left: re.rect.left * factorX,
            top: re.rect.top * factorY - 20,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 20,
                  alignment: Alignment.centerRight,
                  color: usedColor,
                  child: Text(
                    "${re.className ?? re.classIndex.toString()}_${showPercentage ? "${(re.score * 100).toStringAsFixed(2)}%" : ""}",
                  ),
                ),
                Container(
                  width: re.rect.width.toDouble() * factorX,
                  height: re.rect.height.toDouble() * factorY,
                  decoration: BoxDecoration(
                      border: Border.all(color: usedColor, width: 3),
                      borderRadius:
                          const BorderRadius.all(Radius.circular(2))),
                  child: Container(),
                ),
              ],
            ),
          );
        }).toList()
      ],
    );
  });
}