Getting started with the Flutter Barcode Scanner SDK's Custom UI

Required: Permission validation

Custom UI components do not automatically validate camera access permissions. It's up to developers to request and secure these permissions within their applications. Before integrating camera functionalities, ensure that your app has obtained the necessary permissions to provide users with a seamless experience.

Quick start guide

Use the class BarcodeScannerCamera to build a custom barcode scanner UI.

The scanning results and errors are handled directly within the BarcodeScannerCamera widget.

Here's how you can implement it:

BarcodeScannerCamera implementation

BarcodeScannerCamera(
  configuration: BarcodeCameraConfiguration(
    scannerConfiguration: BarcodeClassicScannerConfiguration(
      barcodeFormatConfigurations: [
        BarcodeFormatConfigurationBase.barcodeFormatCommonConfiguration(),
      ],
      engineMode: BarcodeScannerEngineMode.NEXT_GEN,
      returnBarcodeImage: true,
      onlyAcceptDocuments: false,
    ),
    flashEnabled: true,
    hardwareButtonsEnabled: true,
    minFocusDistanceLock: true,
    cameraModule: CameraModule.BACK,
    cameraZoomFactor: 0.3,
    finder: FinderConfiguration(
      decoration: BoxDecoration(
        border: Border.all(width: 4, color: Colors.orange),
        borderRadius: BorderRadius.circular(16),
      ),
    ),
    overlayConfiguration: SelectionOverlayScannerConfiguration(
      overlayEnabled: true,
      textFormat: BarcodeOverlayTextFormat.CODE_AND_TYPE,
      polygonColor: Colors.green.withOpacity(0.5),
      strokeColor: Colors.greenAccent.withOpacity(0.5),
      highlightedPolygonColor: Colors.red.withOpacity(0.8),
      highlightedStrokeColor: Colors.redAccent.withOpacity(0.8),
      textColor: Colors.white,
      textContainerColor: Colors.black.withOpacity(0.6),
      highlightedTextColor: Colors.yellow,
      highlightedTextContainerColor: Colors.black,
      loadingText: 'Loading...',
      onBarcodeTap: (item, highlighted) {
        // ...
      },
      barcodeItemOverlayViewBinder: (items) async {
        // ...
      },
    ),
  ),
  barcodeListener: (results) {
    // ...
  },
  onError: (error) {
    // ...
  },
  onCameraPreviewStarted: (flashAvailable) {
    // ...
  },
  onPictureTaken: (image) async {
    // ...
  },
)

Configuration classes overview

This section includes properties that control the appearance and behavior. Below is a brief overview:

• BarcodeScannerCamera: Integrates a live barcode scanning camera and includes hooks for lifecycle events.
• BarcodeCameraConfiguration: Manages settings for a barcode scanning camera interface. It controls the initial settings like flash and zoom levels, along with configurations for the finder window, barcode detection, and an AR selection overlay.
• FinderConfiguration: The finder view is a rectangular overlay view that clips the camera view, so that the barcode detection will only occur within the specified area. You can set the size and positioning, as well as other UI properties.
• BarcodeClassicScannerConfiguration: Enables you to customize the barcode formats, document formats, engine mode, additional detection parameters, and image generation preferences. Default settings include support for all recognized barcode and document types.
• SelectionOverlayScannerConfiguration: Configures the barcode selection overlay in a scanning interface, including its visibility, selection behavior, appearance, and interactive callbacks.

Extended usage example

Extended Custom UI example

loading...

See full example on GitHub

For a fully functional example, please refer to our example app scanbot-barcode-scanner-sdk-example-flutter on GitHub.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

Scanbot SDK is part of the Apryse SDK product family

A mobile scan is just the start. With Apryse SDKs, you can expand mobile workflows into full cross‑platform document processing. Whether you need to edit PDFs, add secure digital signatures, or use a fast, customizable document viewer and editor, Apryse gives you the tools to build powerful features quickly.

Learn more

Was this helpful?