Skip to main content

Document Scanner UI Components | Flutter Document Scanner

Introduction​

The Scanbot SDK provides an Activity that handles 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.

The Document scanner is available as an RTU-UI and Classic component (types of components are explained here).

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

RTU-UI 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.

ScanbotSdkUi.startDocumentScanner(config)​

Starts the Document Scanner for guided, automatic document scanning.

alt text

var config = DocumentScannerConfiguration(
  multiPageEnabled: true,
  polygonBackgroundColor: Colors.red.withAlpha(150),
  bottomBarBackgroundColor: Colors.blueAccent,

  pageCounterButtonTitle: "%d Page(s)",
  ...
);
var result = await ScanbotSdkUi.startDocumentScanner(config);

if (result.operationResult == OperationResult.SUCCESS) {
  print('Document Scanner Result: ' + jsonEncode(result));
  // see the array result.pages[] of scanned pages
}
  • result.operationResult -
    • SUCCESS if some pages were snapped
    • ERROR if an error occurred
    • CANCELED if the user canceled the request
  • result.pages - an array of pages. If multi-page mode is enabled, this array may contain more than one page. If multi-page mode is not enabled and result.status is SUCCESS, this array contains one object.
DocumentScannerConfiguration​

All UI configuration options are optional.

  /// The minimum score in percent (0 - 100) of the perspective distortion to accept a detected document. Default is 75.0.
  double? acceptedAngleScore;

  /// The minimum document width or height in percent (0 - 100) of the screen size to accept a detected document. Default is 80.0.
  double? acceptedSizeScore;

  /// Controls whether the auto-snapping toggle button is hidden or not.
  bool? autoSnappingButtonHidden;

  /// Title of the auto-snapping toggle button.
  String? autoSnappingButtonTitle;

  /// When auto-snapping is enabled the document scanner will take a photo automatically when a document is detected, conditions are good and the auto-snapping time-out elapses. In this mode the user can still tap the shutter button to snap a document.
  bool? autoSnappingEnabled;

  /// Controls the auto-snapping speed. Sensitivity must be within the 0..1 range. A value of 1.0 triggers automatic capturing immediately, a value of 0.0 delays the automatic by 3 seconds. The default value is 0.66 (2 seconds)
  double? autoSnappingSensitivity;

  /// The minimum delay in seconds between two consecutive automatic image captures. iOS only.
  double? autoSnappingDelay;

  /// The background color of the bottom shutter-bar.
  Color? bottomBarBackgroundColor;

  /// The color of the title of all buttons in the bottom shutter-bar (Cancel button, etc.), as well as the camera permission prompt button.
  Color? bottomBarButtonsColor;

  /// The preferred camera module (default - BACK)
  CameraModule? cameraModule;

  /// The color of the camera background (relevant only when the camera preview mode is CameraPreviewMode.FIT_IN).
  Color? cameraBackgroundColor;

  /// Preview mode of the camera. Fit-In or Fill-In.
  CameraPreviewMode? cameraPreviewMode;

  /// Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only.
  bool? touchToFocusEnabled;

  /// String being displayed on the label describing that the app is in split mode and needs to go fullscreen to work with camera. iOS only.
  String? cameraUnavailableExplanationText;

  /// Whether the cancel button is hidden or not. iOS only.
  bool? cancelButtonHidden;

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

  /// The default image filter type for new documents pages. Defaults to ImageFilterTypeNone.
  ImageFilterType? defaultPageFilter;

  /// The mode of the document detector to be used for document outline detection. Defaults to ML_BASED. iOS only. For Android, use the Scanbot SDK initializer.
  DocumentDetectorMode? detectorMode;

  /// 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;

  /// Controls whether the flash toggle button is hidden or not.
  bool? flashButtonHidden;

  /// Title of the flash toggle button.
  String? flashButtonTitle;

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

  /// Shows the user guidance elements if autosnapping is disabled.
  bool? forceUserGuidance;

  /// Sets whether to ignore the OK_BUT_BAD_ASPECT_RATIO detection status. By default BadAspectRatio is not ignored.
  bool? ignoreBadAspectRatio;

  /// The image scaling factor. The factor must be within the 0..1 range. A factor of 1 means that the resulting images retain their original size. When the factor is less than 1, resulting images will be made smaller by that factor. By default the scale is 1.
  double? imageScale;

  /// Controls whether the multi-page toggle button is hidden or not.
  bool? multiPageButtonHidden;

  /// Title of the multi-page mode toggle button.
  String? multiPageButtonTitle;

  /// Controls multi-page mode. When enabled, the user can take multiple document photos before closing the screen by tapping the page counter button. When disabled, the screen will be closed immediately after the first document photo is made. The default value is FALSE.
  bool? multiPageEnabled;

  /// UI Interface orientation lock mode
  OrientationLockMode? orientationLockMode;

  /// Title suffix of the button that finishes the document scanning when multi-page scanning is enabled. The button's title has the format "# Pages", where '#' shows the number of images captured up to now and the suffix "Pages" is set using this method.
  String? pageCounterButtonTitle;

  /// The prioritization of still image quality and capturing speed. Defaults to CapturePhotoQualityPrioritization.BALANCED. If you experience lots of blurry still images try to set this property to CapturePhotoQualityPrioritization.QUALITY. Note: Has no effect on devices prior to iOS 13.0!. iOS only.
  CapturePhotoQualityPrioritization? photoQualityPrioritization;

  /// The background color of the detected document outline when the document's angle, size or aspect ratio is not yet sufficiently good. (All net.doo.snap.lib.detector.DetectionResult with OK_BUT_XXX).
  Color? polygonBackgroundColor;

  /// The background color of the detected document outline when we are ready to snap OK.
  Color? polygonBackgroundColorOK;

  /// The color of the detected document outline when the document's angle, size or aspect ratio is not yet sufficiently good. (All detection statuses in net.doo.snap.lib.detector.DetectionResult that have the OK_BUT_XXX prefix).
  Color? polygonColor;

  /// The color of the detected document outline when we are ready to snap OK.
  Color? polygonColorOK;

  /// Width of the detected document outline.
  double? polygonLineWidth;

  /// The radius to use when drawing rounded corners of the polygon. Default is 8.0.
  double? polygonCornerRadius;

  /// Stroke color of polygon auto snap progress animation. Default is green. Can't be nil.
  Color? polygonAutoSnapProgressColor;

  /// Line width of polygon auto snap progress animation. Default is 5.0.
  double? polygonAutoSnapProgressLineWidth;

  /// Whether polygon auto snap progress animation is enabled or not. Default is true.
  bool? polygonAutoSnapProgressEnabled;

  /// An optional array of aspect ratios the documents have to conform to.
  List<AspectRatio>? requiredAspectRatios;

  /// An optional array of aspect ratios the documents may conform to.
  List<AspectRatio>? preferredAspectRatios;

  /// Whether polygon auto snap progress animation is enabled or not. Default is true.
  Color? shutterButtonAutoInnerColor;

  /// The background color of the shutter button in auto-snapping mode.
  Color? shutterButtonAutoOuterColor;

  /// The indicator color of the shutter button in auto-snapping mode. iOS only.
  Color? shutterButtonIndicatorColor;

  /// The foreground color of the shutter button in manual mode.
  Color? shutterButtonManualInnerColor;

  /// The background color of the shutter button in manual mode.
  Color? shutterButtonManualOuterColor;

  /// The camera session will be stopped entirely, when the receiver disappears and restarts when the receiver reappears if set to True else will pause the delivery of video frames and QR Codes. Defaults to True. iOS only.
  bool? stopsCameraSessionWhenDisappeared;

  /// Text hint that will be shown when the current detection status is OK_BUT_BAD_ANGLES
  String? textHintBadAngles;

  /// Text hint that will be shown when the current detection status is OK_BUT_BAD_ASPECT_RATIO
  String? textHintBadAspectRatio;

  /// Text hint that will be shown when the current detection status is ERROR_NOTHING_DETECTED
  String? textHintNothingDetected;

  /// The text being displayed on the user-guidance label, when a document was detected, but its center is too far away from the image center.
  String? textHintOffCenter;

  /// Text hint that will be shown when the current detection status is OK
  String? textHintOK;

  /// Text hint that will be shown when the current detection status is ERROR_TOO_DARK
  String? textHintTooDark;

  /// Text hint that will be shown when the current detection status is ERROR_TOO_NOISY
  String? textHintTooNoisy;

  /// Text hint that will be shown when the current detection status is OK_BUT_TOO_SMALL
  String? textHintTooSmall;

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

  /// The color of all active toggle buttons in the toolbar.
  Color? topBarButtonsActiveColor;

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

  /// The background color of the user guidance hints.
  Color? userGuidanceBackgroundColor;

  /// The text color of the user guidance hints.
  Color? userGuidanceTextColor;

  /// Font size of the user guidance. Default is 17.0.
  double? userGuidanceFontSize;

  /// Limits the maximum size of the document image. If width or height are zero, this property is effectively ignored.
  Size? documentImageSizeLimit;

  /// Hides the shutter button if set to TRUE. Shows it otherwise. Defaults to FALSE. If set to TRUE, auto-snapping is enabled and the property autoSnappingEnabled of the behaviour configuration will have no effect. Also the auto-snapping button will be hidden.
  bool? shutterButtonHidden;

  /// The text being displayed on the user-guidance label, when the scanners energy saver is activated. iOS only.
  String? textHintEnergySavingActive;

  /// Maximum number of pages to scan. Ignored when set to null, or when `multiPageEnabled` is FALSE. Default value is null.
  int? maxNumberOfPages;

  /// Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE. Android only.
  bool? useButtonsAllCaps;

  /// Allows you to customize the accessibility configuration for the Document Scanner UI
  DocumentScannerAccessibilityConfiguration? accessibilityConfiguration;


DocumentScannerAccessibilityConfiguration details:


    /// Text, that is used as an accessibility label for the flash button.
    String flashButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the flash button.
    String flashButtonAccessibilityHint;
    /// Text, that is used as an accessibility label for the multi-page button.
    String multiPageButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the multi-page button.
    String multiPageButtonAccessibilityHint;
    /// Text, that is used as an accessibility label for the auto-snapping button.
    String autoSnappingButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the auto-snapping button.
    String autoSnappingButtonAccessibilityHint;
    /// Text, that is used as an accessibility label for the cancel button.
    String cancelButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the cancel button.
    String cancelButtonAccessibilityHint;
    /// Text, that is used as an accessibility label for the page-amount button.
    String pageCounterButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the page-amount button.
    String pageCounterAccessibilityHint;
    /// Text, that is used as an accessibility label for the shutter button.
    String shutterButtonAccessibilityLabel;
    /// Text, that is used as an accessibility hint for the shutter button.
    String shutterButtonAccessibilityHint;

Classic Component​

Integration of Document Scanner Classic Components​

Use the classes DocumentScannerCamera, DocumentCameraLiveDetector and ScanbotCameraController to build a custom scanner UI for Document scanning.

Create DocumentCameraLiveDetector instance and attach it to DocumentScannerCamera​

DocumentCameraLiveDetector provides the ability to subscribe to document scanning results with 3 callbacks:

  • snapListener - return Page objects
  • errorListener - return license errors
  • documentContourListener - return DocumentContourScanningResult
late DocumentCameraLiveDetector liveDetector;

...

liveDetector = DocumentCameraLiveDetector(
// Subscribe to the success result of the scanning and error handling
snapListener: (page) {
  // return Page objects
},

errorListener: (error) {
  print(error);
},

documentContourListener: (DocumentContourScanningResult result) {
 // Return DocumentContourScanningResult
  },
);

Add DocumentScannerCamera to the widget tree​

 ScanbotCameraController? controller;

...

DocumentScannerCamera(
 cameraDetector: liveDetector,
 configuration: DocumentCameraConfiguration(
    scannerConfiguration: DocumentClassicScannerConfiguration(
      autoSnapEnabled: true,
      detectDocumentAfterSnap: true,
      autoSnapSensitivity: 0.5
      ... ),
    contourConfiguration: ContourConfiguration(
      strokeOkColor: Colors.red,
      autoSnapProgressEnabled: true,
      autoSnapProgressStrokeWidth: 5,
      ...
    ),
  onWidgetReady: (controller) {
  // After the camera has initialized, you are able to control the camera parameters.
  this.controller = controller;
    ...
  },
)

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?

On this page

Scroll to top