Skip to main content

Classic UI | Flutter Document 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 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 of Document Scanner Classic Components​

Use the DocumentScannerCamera class to build a custom scanner UI for document scanning. The DocumentScannerCamera component manages document scanning results, errors, and contour detection directly within the widget.

Required: Permission Validation​

The DocumentScannerCamera component does not automatically handle camera permissions. Ensure that your application requests and secures the necessary camera permissions to enable scanning functionality.

Quick Start Guide​

Here's how you can integrate DocumentScannerCamera:

DocumentScannerCamera(
  configuration: DocumentCameraConfiguration(
    flashEnabled: flashEnabled, // Manages the initial flash state
    scannerConfiguration: DocumentClassicScannerConfiguration(
      autoSnapEnabled: autoSnappingEnabled, // Enable or disable auto-snap
      detectDocumentAfterSnap: true, // Detect document after snapping
      autoSnapSensitivity: 0.5, // Sensitivity for auto-snap
      ...
    ),
    contourConfiguration: ContourConfiguration(
      showPolygonInManualMode: false, // Hide contour polygon in manual mode
      strokeOkColor: Colors.red, // Color for contour strokes when detection is OK
      fillOkColor: Colors.red.withAlpha(150), // Fill color for contours when detection is OK
      strokeColor: Colors.blue, // Color for contour strokes when detection is in progress
      fillColor: Colors.blue.withAlpha(150), // Fill color for contours when detection is in progress
      cornerRadius: 35, // Radius for contour corners
      strokeWidth: 10, // Width of contour strokes
      autoSnapProgressStrokeColor: Colors.greenAccent, // Color for auto-snap progress
      autoSnapProgressEnabled: true, // Enable auto-snap progress indicator
      autoSnapProgressStrokeWidth: 5, // Width of the auto-snap progress stroke
      ...
    ),
  ),
  snapListener: (page) {
    // Handle scanned Page objects here
  },
  errorListener: (error) {
    // Handle errors such as licensing issues or camera errors
  },
  documentContourListener: (result) {
    // Handle document contour scanning results
  },
  onCameraPreviewStarted: (snapTrigger, isFlashAvailable) {
    // Perform any setup after the camera preview starts
  },
  onHeavyOperationProcessing: (show) {
    // Display a 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:

DocumentScannerCamera​

DocumentCameraConfiguration​

ContourConfiguration​

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