Integrating edge detection in your Flutter app

Ivan July 3, 2023 3 mins read
app store

You are in the process of creating a Flutter application and have come across a requirement where you need to integrate edge detection for documents or images. This is quite complex as it demands intricate image processing techniques.

The Scanbot Document Scanner SDK for Flutter provides a simple and straightforward way to perform edge detection on images.

Here’s a step-by-step guide on how to set it up and use it for edge detection:

1. Install the Scanbot SDK:

The Scanbot SDK Flutter Plugin is available as a Flutter Dart package scanbot_sdk on pub.dev. You can add it as a dependency to your app.

  • Add the scanbot_sdk plugin to your pubspec.yaml file as dependencies:
dependencies:
  scanbot_sdk: ^2.12.1  # see the latest sdk version
  • Use the Flutter CLI (or your IDE) to fetch and install the packages:
$ flutter pub get

2. Initialize the Scanbot SDK:

  • Import the required packages:
import 'package:barcode_scanner/scanbot_sdk.dart';
import 'package:barcode_scanner/scanbot_sdk_models.dart';
  • Then, define your Scanbot SDK configuration options:
var config = ScanbotSdkConfig(
  licenseKey: "<YOUR_SCANBOT_SDK_LICENSE_KEY>",
  loggingEnabled: true,
  imageFormat: ImageFormat.JPG,
  imageQuality: 80,
  storageBaseDirectory: "file:///some/optional/custom-storage-dir/",
  documentDetectorMode: DocumentDetectorMode.ML_BASED,
  licenseErrorHandler: (status, feature) {
    print("status: $status, feature $feature");
  },
);
  • Finally, initialize the Scanbot SDK with the created configuration:
ScanbotBarcodeSdk.initScanbotSdk(config);

3. Perform edge detection with the Scanbot SDK:

The Scanbot SDK utilizes a Page model to interact with and manipulate scanned documents. This model contains properties such as polygon coordinates for cropping, detection status, and image file URIs.

Below are the two ways you can create a Page object and perform edge detection:

Instant edge detection upon page creation:

This method involves creating a Page entity with document detection enabled right from the start. It means that as soon as a Page object is created from a provided image URI, edge detection is performed on it.

Future<void> _createPage(Uri uri) async {
    if (!await checkLicenseStatus(context)) {
      return;
    }

    try {
      var page = await ScanbotSdk.createPage(uri, true); // document detection enabled
      // Now, 'page' is a Page object with edge detection already performed.
    } catch (e) {
      Logger.root.severe(e);
    }
  }

Deferred edge detection after page creation:

In this method, you first create a Page entity with document detection disabled. After that, you manually perform edge detection on the created Page object. This is helpful when you need to perform some operations on the Page before applying edge detection.

Future<void> _createPage(Uri uri) async {
    if (!await checkLicenseStatus(context)) {
      return;
    }

    try {
      var page = await ScanbotSdk.createPage(uri, false); // document detection not enabled
      page = await ScanbotSdk.detectDocument(page); // apply document detection later
      // Now, 'page' is a Page object on which edge detection has been performed.
    } catch (e) {
      Logger.root.severe(e);
    }
  }

That’s it! With these methods, you can now integrate efficient edge detection functionality in your Flutter app using the Scanbot SDK. Just ensure to handle potential exceptions to avoid any unexpected crashes or issues during runtime.