Flutter数据扫描插件sbb_data_scanner的使用

Flutter数据扫描插件sbb_data_scanner的使用

获取开始

支持平台

前提条件

该插件使用了Flutter的camera插件来访问设备相机。确保遵循其安装说明。

此外，请按照以下指南进行设置：

• google_mlkit_barcode_scanning
• google_mlkit_text_recognition

具体来说，设置最低的iOS和Android SDK版本以及Podfile。

代码使用

导入库后，可以在小部件树中添加一个DataScanner。可以通过包裹在SizedBox中来控制其大小。如果没有大小限制（例如在Row或Column中），DataScanner将不会超过屏幕的宽度和/或高度（取决于方向）。

SizedBox(
  height: 250,
  width: 400,
  child: DataScanner( /* ... */ ),
)

如果想要全屏扫描器，可以使用DataScannerPage小部件。

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => DataScannerPage( /* ... */ ),
  ),
);

文档

功能

DataScanner配置

你可以通过传递DataScannerConfiguration<T>来配置DataScanner，其中T表示成功提取将返回的类型。这将在下文的提取器部分详细介绍，但通常由编译器推断。几乎所有字段都有默认值，例外的是所需的processor和extractor值，它们将在各自的章节中介绍。

DataScanner(
  scannerConfiguration: DataScannerConfiguration<T>(
    processors: // 在各自的章节中覆盖
    extractors: // 在各自的章节中覆盖

    routeObserver: RouteObserver<ModalRoute>(),

    onExtracted: (T value) {
      // 当检测区域内的提取值不为空且与之前提取的值不同
    },

    onPermissionDenied: () {
      // 当应用没有相机权限时调用
    },

    onError: (String error) {
      // 当库遇到任何其他相机错误时调用
    },

    showTorchToggle: true,
    torchToggleMargin: EdgeInsets.all(32),
    torchToggleAlignment: Alignment.bottomCenter,

    showOverlay: true,
    upperHelper: Text('出现在检测区域上方'),
    lowerHelper: Text('出现在检测区域下方'),

    detectionAreaHeight: 75,
    detectionAreaWidth: 250,
    detectionAreaMode: DetectionAreaMode.containsRect,

    detectionOutline: DetectionOutlineConfig(
      margin: 5,
      padding: 10,

      activeOutlineColor: Colors.green,
      inactiveOutlineColor: Colors.grey,
      outlineWidth: 2,
      cornerRadius: 5,

      enableLabel: true,
      labelColor: Colors.white,
      labelSize: 12,
      labelPosition: DetectionLabelPosition.bottomLeft,
    ),

    enableZoom: true,
    onZoomChanged: (double zoom) {
      // 当缩放发生变化时调用，最小变化敏感度为0.01
    }
  ),
)

视觉处理器

视觉处理器的目的是在图像中检测元素，并相对于原点（通常是左上角）返回其值和位置。 库随附了三个预配置的视觉处理器，基于Google ML Kit：

• TextRecognitionVisionProcessor
• OneDimensionalBarcodeVisionProcessor
• TwoDimensionalBarcodeVisionProcessor

添加处理器列表到DataScannerConfiguration的processors参数中：

DataScanner(
  scannerConfiguration: DataScannerConfiguration(
    // ...
    processors: [
      TextRecognitionVisionProcessor(),
      // OneDimensionalBarcodeVisionProcessor(),
      // TwoDimensionalBarcodeVisionProcessor()
    ],
  ),
)

还可以通过实现VisionProcessor接口创建自定义视觉处理器。这允许库检测除文本、QR码和条形码之外的其他元素：

abstract class VisionProcessor {
  Future<Map<Rect, String?>> getBoundingBoxes({
    required CameraImage image,
    required int imageRotation,
  });
}

提取器

提取器从视觉处理器检测到的值中尝试提取特定格式的数据（如URL、UIC编号或GS1代码）。同时，它也作为过滤器，因为不匹配给定格式的检测值将被忽略。库随附了三个预配置的提取器，可通过DataScannerConfiguration的extractors参数提供。

示例UICDetailsExtractor实现：

DataScanner(
  scannerConfiguration: DataScannerConfiguration<UICDetails>(
    // ...
    extractors: [
      UICDetailsExtractor(/* ... */),
    ],
  ),
)

自定义提取器

对于URL、电话号码和Nestlé品牌等格式，如何提取？ 很简单，只需实现Extractor<T>接口即可。

abstract class Extractor<T> {
  T? extract(String? input);
}

extract方法必须返回一个可空类型。什么时候返回null？很简单：当由于格式问题、输入缺少组件或错误导致无法提取值时。这会导致ScannerConfiguration.onExtracted不被触发，因为检测到的值格式无效。

例如，这里是一个简单的CompoundSentenceExtractor，它只提取包含逗号和句点结尾的复合句子。

class CompoundSentenceExtractor implements Extractor<String> {
  String? extract(String? input) {
    if (input == null) return null;

    final containsComma = input.contains(',');
    final isSentence = input.endsWith('.');

    // 当然，",." 是一个有效的复合句子！
    return containsComma && isSentence ? input : null;
  }
}

现在可以使用自己的提取器：

DataScanner(
  scannerConfiguration: DataScannerConfiguration<String>(
    // ...
    extractors: [
      CompoundSentenceExtractor(),
    ],
  ),
)