Classic UI

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.

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.

Click to expand

/// The configuration of the camera and detection behavior.
final BarcodeCameraConfiguration configuration;

/// Runs each time the camera preview is started. This differs for android and ios.
/// In android  this function will be called after each successful snap while in ios only once.
/// As ios not stopping camera preview after the snap
final Function(bool isFlashAvailable)? onCameraPreviewStarted;

/// triggers when camera plugin make long work eg. saving snap to the image etc.
final Function(bool)? onHeavyOperationProcessing;

/// The callback that will be called each time barcodes is detected.
final Function(BarcodeScanningResult result)? barcodeListener;

/// The callback that will be called when there are problems with a license.
final Function(SdkLicenseException exception)? errorListener;

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.

Click to expand

/// Controls whether the flash should be initially enabled.
/// The default value is FALSE.
bool? flashEnabled;

/// Controls whether the frame detection should be enabled.
bool detectionEnabled;

/// Set current zoom by a linear zoom value ranging from 0f to 1.0f. It maps to the range of real values of 1x-12x zoom.
/// If device os not supporting some part of this range the closest value will be taken.
/// Optical Zoom Level 0f represents the minimum zoom(1x) while Optical Zoom Level 1.0f represents the maximum zoom(12x).
/// Default value is 0f.
double? cameraZoomFactor;

/// Configuration of the finder window.
FinderConfiguration? finder;

/// Configuration of the barcode scanner detection behavior eg. which barcode types to detect etc.
BarcodeClassicScannerConfiguration scannerConfiguration;

/// The configuration of AR selection overlay.
SelectionOverlayScannerConfiguration? overlayConfiguration;

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)

Click to expand

/// The rectangle that perforates the background and that will be presented as the finder.
BoxDecoration decoration;

/// This widget will be drawn on top of the finder.
/// Here you can add some custom design elements, for example, a QR code watermark.
Widget? widget;

/// Something that should be shown between the top of the finder and the camera view.
Widget? topWidget;

/// Something that should be shown between the bottom of the finder and the camera view.
Widget? bottomWidget;

/// The overlay background color, surrounding the finder view rectangle.
Color? backgroundColor;

/// The finder view rectangle aspect ratio.
FinderAspectRatio? finderAspectRatio;

/// The finder view Insets. You can use it to move the finder view rectangle around the screen and to set borders around it.
Insets? finderInsets;

/// Triggers when the finder area is changed.
/// Can be helpful when aligning some content on top of the finder.
final OnFinderRectChange? onFinderRectChange;

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.

Click to expand

/// List of accepted Barcode Formats; any formats that are not included in this
/// list will not be detected by the `BarcodeCameraView`. By default, the list
/// includes all supported barcode types.
List<BarcodeFormat> barcodeFormats;

/// List of accepted Document Formats; any document formats that are not included
/// in this list will be ignored by the `BarcodeCameraView`. By default, the list
/// includes all supported document types.
List<AcceptedDocumentFormats> acceptedDocumentFormats;

/// The engine mode of the barcode recognizer. Defaults to NEXT_GEN.
/// To use the legacy recognizer, please specify LEGACY.
EngineMode? engineMode;

/// Additional parameters for tweaking the detection of barcodes.
BarcodeAdditionalParameters? additionalParameters;

/// Parameter that handles whether we need to save the image from the video stream
/// or to capture a photo of the barcode.
/// Image uri will be returned in [BarcodeScanningResult.snappedImage] property.
BarcodeImageGenerationType barcodeImageGenerationType;

SelectionOverlayConfiguration

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

Click to expand

/// Whether the barcode selection overlay is enabled or not.
bool overlayEnabled;

/// Whether to return results from barcodeLiveDetection callback or only proceed with manual click on barcode polygon
bool automaticSelectionEnabled;

/// Define the way of how to show barcode data with selection overlay.
BarcodeOverlayTextFormat textFormat;

/// The color of the polygon in the selection overlay.
Color? polygonColor = Colors.white;

/// The color of the text in the selection overlay.
Color? textColor = Colors.black;

/// The color of the texts background in the selection overlay.
Color? textContainerColor = Colors.white;

/// Callback that will be called when barcode on screen is clicked.
Function(BarcodeItem item)? onBarcodeClicked;

Extended usage example

lib/ui/classic_components/barcode_custom_ui.dart

loading...

See full example on GitHub

For a fully functional example, please see 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 your free Trial License

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---