Advanced Configurations

Customization of the Overlays

To customize the appearance of an overlay you can implement a LabelCaptureBasicOverlayListener and/or LabelCaptureAdvancedOverlayListener interface, depending on the overlay(s) you are using.

The method brushForLabel() is called every time a label is captured, and brushForField() is called for each of its fields to determine the brush for the label or field.

overlay.addListener(LabelCaptureBasicOverlayListener(
  brushForLabel: (overlay, label) {
    return null;
  },
  brushForField: (overlay, field, label) {
    if (field.name == '<your-barcode-field-name>') {
      return Brush(
        fillColor: Colors.blue.withOpacity(0.2),
        strokeColor: Colors.blue,
        strokeWidth: 0,
      );
    }

    if (field.name == '<your-expiry-date-field-name>') {
      return Brush(
        fillColor: Colors.red.withOpacity(0.2),
        strokeColor: Colors.red,
        strokeWidth: 0,
      );
    }

    return null;
  },
));

tip

You can also use LabelCaptureBasicOverlay.setLabelBrush() and LabelCaptureBasicOverlay.setCapturedFieldBrush() to configure the overlay if you don't need to customize the appearance based on the name or content of the fields.

Advanced Overlay

For more advanced use cases, such as adding custom views or implementing Augmented Reality (AR) features, you can use the LabelCaptureAdvancedOverlay. The example below creates an advanced overlay, configuring it to display a styled warning message below expiry date fields when they’re close to expiring, while ignoring other fields.

final advancedOverlay = LabelCaptureAdvancedOverlay.newInstance(
  labelCapture,
  dataCaptureView,
);

advancedOverlay.addListener(LabelCaptureAdvancedOverlayListener(
  viewForCapturedLabel: (overlay, capturedLabel) {
    return null; // We only care about specific fields
  },
  anchorForCapturedLabel: (overlay, capturedLabel) {
    return Anchor.center;
  },
  offsetForCapturedLabel: (overlay, capturedLabel, view) {
    return PointWithUnit.withPixel(0, 0);
  },
  viewForCapturedLabelField: (overlay, labelField) {
    if (labelField.name.toLowerCase().contains("expiry") &&
        labelField.type == LabelFieldType.text) {

      final daysUntilExpiry = daysUntilExpiryFunction(labelField.text); // Your method
      const dayLimit = 3;

      if (daysUntilExpiry < dayLimit) {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          color: Colors.red,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Icon(Icons.warning, color: Colors.white),
              SizedBox(width: 8),
              Text("Item expires soon!", style: TextStyle(color: Colors.white)),
            ],
          ),
        );
      }
    }

    return null;
  },
  anchorForCapturedLabelField: (overlay, labelField) {
    return Anchor.bottomCenter;
  },
  offsetForCapturedLabelField: (overlay, labelField, view) {
    return PointWithUnit.withUnit(0, 22, MeasureUnit.dip);
  },
));