Skip to main content

Image Cropping | 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 Scanbot SDK provides the ability to crop, rotate and perform perspective correction on the source images.

The Image cropping functionality is available both as an RTU-UI and as a classic component.

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.startCroppingScreen(page,config)​

The Cropping UI provides functionality for manual cropping and rotation of an image. It uses the edge detection algorithm of the Scanbot SDK and contains some smart UI elements like magnetic lines and a magnifier.

alt

var config = CroppingScreenConfiguration(
  bottomBarBackgroundColor: Colors.redAccent,
  cancelButtonTitle: 'Cancel',
  doneButtonTitle: 'Save',
  ...
);
var result = await ScanbotSdkUi.startCroppingScreen(page, config);
// result.page ...
  • result.operationResult
    • SUCCESS if the user applied changes to the image (tapped on the "done" button)
    • ERROR if an error occurred
    • CANCELED if the user has canceled the operation (tapped on the "cancel" button)
  • result.page - the cropped page.

CroppingScreenConfiguration​

The cropping UI requires a page object. A page object can be initially created using the Document Scanner, createPage() or createPageWithImageBytes().

All UI configuration settings are optional.

  /// Background color of the main screen.
  Color? backgroundColor;

  /// Background color of the bottom toolbar.
  Color? bottomBarBackgroundColor;

  /// The color of the titles of all buttons in the bottom toolbar (Rotate button).
  Color? bottomBarButtonsColor;

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

  /// Title of the Done button.
  String? doneButtonTitle;

  /// Default color of the cropping outline.
  Color? polygonColor;

  /// Outline color of magnetically snapped edges.
  Color? polygonColorMagnetic;

  /// Width of the cropping outline.
  int? polygonLineWidth;

  /// Title of the Rotate button.
  String? rotateButtonTitle;

  /// Background color of the top toolbar.
  Color? topBarBackgroundColor;

  /// The color of the titles of all buttons in the top toolbar (Cancel and Done buttons).
  Color? topBarButtonsColor;

  /// Title in the top bar (iOS only).
  String? topBarTitle;

  /// The color of the title in the top bar (iOS only).
  Color? titleColor;

  /// Title of the Detect button.
  String? detectButtonTitle;

  /// Title of the Reset button.
  String? resetButtonTitle;

  /// Controls whether the Rotate button is hidden or not.
  bool? rotateButtonHidden;

  /// Controls whether the Detect/Reset button is hidden or not.
  bool? detectResetButtonHidden;

  /// UI orientation lock mode: PORTRAIT, LANDSCAPE, etc.
  /// By default the UI is not locked.
  CameraOrientationMode? orientationLockMode;

Classic Component​

Integration of Cropping Components​

Use the classes ScanbotCroppingWidget and CroppingController to build custom Cropping Classic Component for Page Objects.

Add ScanbotCroppingWidget to the widget tree​
CroppingController? croppingController;

ScanbotCroppingWidget(
  page: page, // Add Page Object to Crop
  onViewReady: (controller) {
    croppingController = controller;
  },
  onHeavyOperationProcessing: (isProcessing) {
    ...
  },
  edgeColor: Colors.red,
  ...
)

ScanbotCroppingWidget​

final common.Page page;

/// Width of the cropping rectangle lines
final double edgeLineWidth;

/// Color of the cropping rectangle lines
final Color edgeColor;

/// Color of the cropping rectangle lines when they are snapped in place
final Color edgeColorOnLine;

/// Color of the cropping rectangle anchor points
final Color anchorPointsColor;

/// Distance from the edge of the widget to the cropped image
final common.Insets? borderInsets;

/// Triggers when the plugin takes long to process an operation eg. polygon detection
final Function(bool)? onHeavyOperationProcessing;

/// Triggers when the view is ready
final Function(CroppingController) onViewReady;

CroppingController​

CroppingController provides the ability to control cropping functionality:

  • reset - to reset all changes made to the Page Object.
  • detect - to auto-detect the polygon.
  • rotateCw - to rotate the image clockwise.
  • rotateCCW - to rotate the image counter-clockwise.
  • getPolygon - to get the cropping result from the classic component.

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