Skip to main content

Classic UI | Flutter Barcode Scanner

Our Classic UI Components allow you to build your own flexible and fully customizable UI components. These building blocks are easy to integrate and customize and can be used in your own Widgets to implement barcode scanning functionalities.

Classic UI components require more effort during integration compared to Ready-to-Use UI Components, but allow you to fully customize the UI and its behavior.

Integration preparation​

Required: Permission validation​

Classic 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 scanner UI for Barcode and QR-Code scanning. The barcode scanning results and errors are handled directly within the BarcodeScannerCamera widget. Please check all available properties here.

Here's how you can implement it:

...

BarcodeScannerCamera(
    configuration: BarcodeCameraConfiguration(
        scannerConfiguration: BarcodeClassicScannerConfiguration(
            barcodeFormats: [BarcodeFormat.QR_CODE],
            engineMode: EngineMode.NEXT_GEN,
        ),
        finder: FinderConfiguration(),
    ),
    barcodeListener: (scanningResult) {
        // Handle barcode scanning results here.
    },
    errorListener: (error) {
        // Handle errors here, such as licensing issues.
    },
    onCameraPreviewStarted: (isFlashAvailable) {
        // Perform any setup after the camera preview starts.
    },
    onHeavyOperationProcessing: (show) {
        // Display progress bar or loading indicator during long operations.
    },
    ...
)

Classic UI 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 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 detection will focus just a specific area. You can specify the size and positioning, as well as other UI properties. Set this property to true if you want to use the Finder View, false otherwise (default: false)

BarcodeClassicScannerConfiguration.​

It allows customization of barcode formats, document formats, engine mode, additional detection parameters, and image generation preferences. Default settings include support for all recognized barcode and document types.

SelectionOverlayConfiguration.​

Configures the barcode selection overlay in a scanning interface, including its visibility, selection behavior, appearance, and interactive callbacks.

Extended usage example​

lib/ui/classical_components/barcode_custom_ui.dart
loading...

For a fully functional example, please see our example app scanbot-sdk-example-flutter on GitHub.

Want to scan longer than one minute?

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

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top