Skip to main content

UI Components | Flutter Barcode Scanner

Introduction

The Scanbot SDK comes with an essential camera view, additional views for extending the camera functionality and a detector classes that handle all the camera and detection implementation details for you.

It provides a UI for document scanning guidance as well as a UI and functionality for manual and automatic shutter release on barcode detection.

RTU-UI Component

The Barcode scanner is available as an RTU-UI and Classic component.

The Ready-To-Use UI (RTU-UI) Components are a set of easy-to-integrate and customizable high-level UI components (activities) for the most common tasks: The design and behavior of these ready-to-use Activities are based on our many years of experience as well as the feedback from our SDK customers.

You can customize the look and behavior of our RTU-UI components with regards to the following characteristics:

  • UI: You can customize all colors and text resources (localization).
  • Behavior: You can enable or disable features like Multi Page, Auto Snapping, Flashlight.
  • Use in workflows of your app: e.g. Your Main Screen => Scanbot Document Scanner Screen => Your Custom Review Screen => Scanbot Cropping Screen => Your Custom Document Handling

Please note: The main idea of the RTU UI is to provide simple-to-integrate and simple-to-customize activity components. Due to this idea there are some limitations with the possibilities of customization. If you need more customization options you have to implement custom Activities using our "Classic Components".

Classic 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 Activities to implement the most common tasks:

Take a look at our Example Apps to see how to integrate the Barcode Scanner.

Barcode Scanner

ScanbotBarcodeSdk.startBarcodeScanner(config)

Opens a Scanning UI for barcodes and QR codes.

alt

var config = BarcodeScannerConfiguration(
barcodeFormats: [BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX],
topBarBackgroundColor: Colors.blueAccent,
finderTextHint: "Please align a barcode in the frame to scan it.",
cancelButtonTitle: "Cancel",
flashEnabled: true,
...
);
var result = await ScanbotBarcodeSdk.startBarcodeScanner(config);
// result.barcodeItems[n].barcodeFormat
// result.barcodeItems[n].text
// result.barcodeItems[n].formattedResult
  • result.operationResult:
    • SUCCESS if a barcode was detected
    • ERROR if an error occurred
    • CANCELED if the user has canceled the operation (tapped on the "cancel" button)
  • barcodeItems[n] - a list of detected barcodes/QR codes as BarcodeItems:
    • item.barcodeFormat - Format of detected barcode/QR code (e.g. "CODE_128", "EAN_13", "QR_CODE", etc).
    • item.text - Raw text value of detected barcode/QR code.
    • item.rawBytes - Raw bytes of detected barcode/QR code.
    • item.formattedResult - Optional, formatted/parsed result. See implementations of BarcodeFormattedResult.
BarcodeScannerConfiguration

All settings are optional.

  • barcodeFormats is an optional array of barcode formats that act as a detection filter. By default all supported formats will be detected.

  • acceptedDocumentFormats is an optional array of accepted barcode formats that acts as a detection filter. By default all supported formats will be detected.

  • Further configs:
  /// Background color of the top toolbar.
Color? topBarBackgroundColor;

/// The color of the titles of all buttons in the top toolbar.
Color? topBarButtonsColor;

/// Background color outside the finder window.
Color? cameraOverlayColor;

/// The color of the finder window's outline.
Color? finderLineColor;

/// The color of the text hint under the finder window.
Color? finderTextHintColor;

bool? cancelButtonHidden;

/// Title of the cancel button.
String? cancelButtonTitle;

/// Title of the button that opens the screen where the user can allow
/// the usage of the camera by the app.
String? enableCameraButtonTitle;

/// Text that will be displayed when the app
/// is not allowed to use the camera, prompting the user
/// to enable the usage of the camera.
String? enableCameraExplanationText;

/// Text hint shown under the finder window.
String? finderTextHint;

/// The color of the titles of all inactive buttons in the top toolbar.
Color? topBarButtonsInactiveColor;

/// Cancel scanning and close view on timeout.
int? autoCancelTimeout;

/// Aspect ratio of finder view.
FinderAspectRatio? finderAspectRatio;

/// Thickness of the finder window's outline.
int? finderLineWidth;

/// Controls whether to play a beep sound after a successful detection.
/// Default value is TRUE.
bool? successBeepEnabled;

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

/// Orientation lock mode of the camera: PORTRAIT or LANDSCAPE.
/// By default the camera orientation is not locked.
CameraOrientationMode? orientationLockMode;

/// Barcode formats which need to be recognized.
List<BarcodeFormat>? barcodeFormats;

/// Barcode document formats which need to be recognized.
List<AcceptedDocumentFormats>? acceptedDocumentFormats;

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

/// Param that handle whether we need to save image from camera preview or make a snapshot while snapping barcode
/// image uri will be returned in [BarcodeScanningResult.snappedImage] property
BarcodeImageGenerationType barcodeImageGenerationType

/// Type of engine to be used in barcode scanner
EngineMode engineMode;

///Set current zoom by a linear zoom value ranging from 0f to 1.0f. Optical Zoom Level 0f represents the minimum zoom while Optical Zoom Level 1.0f represents the maximum zoom.
///Default value is 0f.
double? cameraZoomFactor;

/// Locks the minimum supported focus distance thus disabling continuous focus.
/// Default value is false. Only compatible with CameraX in Android.
bool? minFocusDistanceLock;

Barcode additional params details:

  /// With this option, the scanner assumes that the barcode can be a GS1 barcode, and modifies the behavior as needed.
/// You can set it to FALSE, if you don't want to see decoded FNC1 characters ("]C1" and ASCII char 29).
/// The default is TRUE.
bool? enableGS1Decoding;

/// Minimum required text length of the detected barcode.
/// The default is 0.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? minimumTextLength;

/// Maximum text length of the detected barcode. Setting to zero removes the limit.
/// The default is 0.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? maximumTextLength;

/// Minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode).
/// The default is 10.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? minimum1DBarcodesQuietZone;

Batch Barcode Scanner

ScanbotBarcodeSdk.startBatchBarcodeScanner(config)

Opens a scanning UI for scanning and collecting multiple barcodes.

alt

var config = BatchBarcodeScannerConfiguration(
barcodeFormats: [BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX],
topBarBackgroundColor: Colors.blueAccent,
finderTextHint: "Please align a barcode in the frame to scan it.",
flashEnabled: true,
...
);
var result = await ScanbotBarcodeSdk.startBatchBarcodeScanner(config);
// result.barcodeItems[n] ...

Result:

  • result.operationResult - SUCCESS if a barcode was detected, ERROR if the user has canceled the operation (tapped on the "cancel" button).
  • result.barcodeItems - List of recognized barcodes as items of BarcodeItem type.

BarcodeItem structure:

  • barcodeFormat - Format of detected barcode/QR code (e.g. "CODE_128", "EAN_13", "QR_CODE", etc).
  • text - Raw text value of detected barcode/QR code.
  • rawBytes - Raw bytes of detected barcode/QR code.
  • formattedResult - Optional, formatted/parsed result. See implementations of BarcodeFormattedResult.
BatchBarcodeScannerConfiguration

Use this configuration class to customize the UI and the behavior of the Batch Barcodes Scanner UI. All config properties are optional.

BatchBarcodeScannerConfiguration:

  /// Change data representation for scanned list items
BarcodeDataFormatter? barcodeFormatter;

/// The background color of the top toolbar.
Color? topBarBackgroundColor;

/// The color of the titles of all buttons in the top toolbar.
Color? topBarButtonsColor;

/// The color of the titles of all inactive buttons in the top toolbar.
Color? topBarButtonsInactiveColor;

/// The color of barcodes count text
Color? barcodesCountTextColor;

/// The color of barcodes details action
Color? detailsActionColor;

/// The color of barcodes details background
Color? detailsBackgroundColor;

/// The color of barcodes details background
Color? detailsPrimaryColor;

/// The background color outside the finder window.
Color? cameraOverlayColor;

/// The color of the finder window's outline.
Color? finderLineColor;

/// The color of the text hint under the finder window.
Color? finderTextHintColor;

/// To hide cancel button or not.
bool? cancelButtonHidden;

/// Title of the cancel button.
String? cancelButtonTitle;

/// Title of the button that opens the screen where the user can allow
/// the usage of the camera by the app.
String? enableCameraButtonTitle;

/// Text that will be displayed when the app
/// is not allowed to use the camera, prompting the user
/// to enable the usage of the camera.
String? enableCameraExplanationText;

/// Text hint shown under the finder window.
String? finderTextHint;

/// Text of submit button.
String? submitButtonTitle;

/// Text of clear button.
String? clearButtonTitle;

/// Text of count text.
String? barcodesCountText;

/// Text of fetch state text.
String? fetchingStateText;

/// Text when there are no scanned barcodes yet.
String? noBarcodesTitle;

/// Aspect ratio of finder view.
FinderAspectRatio? finderAspectRatio;

/// Thickness of the finder window's outline.
int? finderLineWidth;

/// Controls whether to play a beep sound after a successful detection.
/// Default value is TRUE.
bool? successBeepEnabled;

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

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

/// Orientation lock mode of the camera: PORTRAIT or LANDSCAPE.
/// By default the camera orientation is not locked.

CameraOrientationMode? orientationLockMode;

/// Barcode formats which need to be recognized.
List<BarcodeFormat>? barcodeFormats;

/// Barcode document formats which need to be recognized.
List<AcceptedDocumentFormats>? acceptedDocumentFormats;

/// Type of engine to be used in barcode scanner
EngineMode engineMode;

/// Locks the minimum supported focus distance thus disabling continuous focus.
/// Default value is false. Only compatible with CameraX in Android.
bool? minFocusDistanceLock;

Barcode additional params details:

  /// With this option, the scanner assumes that the barcode can be a GS1 barcode, and modifies the behavior as needed.
/// You can set it to FALSE, if you don't want to see decoded FNC1 characters ("]C1" and ASCII char 29).
/// The default is TRUE.
bool? enableGS1Decoding;

/// Minimum required text length of the detected barcode.
/// The default is 0.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? minimumTextLength;

/// Maximum text length of the detected barcode. Setting to zero removes the limit.
/// The default is 0.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? maximumTextLength;

/// Minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode).
/// The default is 10.
/// NOTE: Currently works for ITF and MSI Plessey barcodes only!
int? minimum1DBarcodesQuietZone;

Classic Component

Integration of Barcode Scanner Classic Components

Use the classes BarcodeScannerCamera, BarcodeCameraLiveDetector and ScanbotCameraController to build a custom scanner UI for Barcode and QR-Code scanning.

Create BarcodeCameraLiveDetector instance and attach it to BarcodeScannerCamera

BarcodeCameraLiveDetector provides the ability to subscribe to barcode scanning results with 2 callbacks:

  • barcodeListener - scanning results
  • errorListener - license errors
late BarcodeCameraLiveDetector barcodeCameraDetector;

...

barcodeCameraDetector = BarcodeCameraLiveDetector(
barcodeListener: (scanningResult) {
print(scanningResult.toJson().toString());
},
errorListener: (error) {
// Error listener will inform if there is a problem with the license when opening the screen.
print(error);
},
);
Add BarcodeScannerCamera to the widget tree
 ScanbotCameraController? controller;

...

BarcodeScannerCamera(
cameraDetector: barcodeCameraDetector,
configuration: BarcodeCameraConfiguration(
scannerConfiguration: BarcodeClassicScannerConfiguration(
barcodeFormats: [BarcodeFormat.QR_CODE],
engineMode: EngineMode.NextGen,
//barcodeImageGenerationType: BarcodeImageGenerationType.CAPTURED_IMAGE
...
),
finder: FinderConfiguration(),
onWidgetReady: (controller) {
// After the camera has initialized, you are able to control the camera parameters.
this.controller = controller;
}
...
),
...
)
BarcodeScannerCamera
final BarcodeCameraLiveDetector cameraDetector;

final BarcodeCameraConfiguration configuration;

final Function(ScanbotCameraController controller) onWidgetReady;

/// Triggers when the camera plugin needs to do some heavy processing eg. saving the snap as an image.
final Function(bool)? onHeavyOperationProcessing;
BarcodeCameraConfiguration
/// Controls whether the flash should be initially enabled.
/// The default value is FALSE.
bool? flashEnabled;

/// Sets the current zoom by a linear zoom value ranging from 0f to 1.0f.
/// Optical Zoom Level 0f represents the minimum zoom
/// while Optical Zoom Level 1.0f represents the maximum zoom.
/// Default value is 0.
double? cameraZoomFactor;

FinderConfiguration? finder;

BarcodeClassicScannerConfiguration scannerConfiguration;
FinderConfiguration
/// 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 minimum padding from the bounds of the screen.
double finderMinimumPadding;

/// Triggers when the finder area is changed.
/// Can be helpful when aligning some content on top of the finder.
final OnFinderRectChange? onFinderRectChange;
BarcodeClassicScannerConfiguration
/// 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
ScanbotCameraController

ScanbotCameraController provides the ability to control camera functionality:

  • isFlashAvailable - to check if the flashlight is available on the device.
  • setFlashEnabled - to enable the flashlight.

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?