Flutter Scanner-Apps: So integrieren Sie das Scanbot SDK

11.11.2019

In unserem ersten Artikel haben wir bereits die Vielseitigkeit und die einfache Handhabung von Flutter gelobt. Um für noch mehr Begeisterung zu sorgen, solltest Du dir dieses kleine Tutorial selbst anschauen. Du wirst überrascht sein, wie einfach es ist, komplexe Funktionen wie unser Scanner SDK für Flutter mit ein paar Zeilen Code hinzuzufügen. Los geht's …

Wie schnell kann man mit dem Framework entwickeln?

Die Integration des Scanbot SDK mit Flutter für iOS und Android Betriebssysteme kann innerhalb eines Tages, oder weniger Werktage, je nach Komplexität, abgeschlossen werden. Hierbei lassen sich Farben und Text an das CD (Corporate Design) anpassen.

Was sind die ersten Schritte der Integration mit Flutter?

Anforderungen
FĂĽr Android Apps
FĂĽr iOS Apps


Du kannst Android Studio als IDE für die Entwicklung von Flutter Apps verwenden. Außerdem gibt es Flutter IDE Plugins für VS Code und IntelliJ IDEA. In diesem Tutorial werden wir die Flutter-CLI (Command Line Interface) Tools verwenden, da diese Tools einfach zu benutzen sind und unabhängig von jeglichen IDE-Plugins funktionieren.

Sobald Du das Framework installiert hast, kannst Du den Befehl flutter doctor ausfĂĽhren, um zu ĂĽberprĂĽfen, ob alle erforderlichen Tools richtig eingerichtet sind.

Erstelle eine “Hello World” Flutter App

$ flutter create --androidx my_awesome_flutter_app

‍

Dieser Befehl erzeugt ein einfaches Flutter Projekt fĂĽr Android und iOS.

Bitte beachte die Option --androidx, die das Android-Projekt unter Verwendung der neuen AndroidX Bibliotheken generiert. Sie ist nicht nur erforderlich, um die neueste Version des Scanbot Android SDKs zu verwenden, sondern wird auch fĂĽr jedes neue Android Flutter Projekt dringend empfohlen.

(Wenn Du Dein Flutter Projekt nach AndroidX migrieren musst, schau Dir bitte die entsprechende Flutter Dokumentation "AndroidX Migration" an).

Testlauf

Schließe ein mobiles Gerät über USB an und führe die App aus.

‍

‍Android

$ cd my_awesome_flutter_app/
$ flutter run -d <DEVICE_ID>

Du kannst die IDs aller angeschlossenen Geräte über flutter devices erhalten.

iOS

Ă–ffne den Xcode-Workspace ios/Runner.xcworkspace und passe die Einstellungen fĂĽr das Signing / Developer Account in der Xcode IDE an. Erstelle dann die Anwendung in Xcode und fĂĽhre sie aus.

Sowohl auf Android als auch auf iOS solltest Du die gleiche "Hello World" Anwendung sehen, die eine einfache Benutzeroberfläche mit einer Schaltfläche und Beschriftungs-Widgets sowie die Funktionalität zum Erhöhen eines Zählers zeigt.

‍

‍

‍

‍

‍

FĂĽge das Scanbot SDK Flutter Plugin hinzu

Als nächster Schritt werden wir das Flutter Plugin hinzufügen, das als öffentliches Flutter-Package zur Verfügung gestellt wird. Flutter Plugins sind als Packages erhältlich und bieten Zugriff auf native System APIs wie Kamera, Netzwerk, Batteriestatus usw., sowie auf SDKs für Plattformen von Drittanbietern wie z.B. Firebase.

Es gibt eine Menge Packages, die auf dem offiziellen Repository pub.dev gehostet werden, das ein Ă„quivalent zu npmjs.org fĂĽr Node-Packages oder nuget.org fĂĽr Xamarin-Packages ist. Weitere Einzelheiten zu den Flutter-Packages findest Du in den Flutter Dokumenten "Packages verwenden".

Fügen wir also das Package scanbot_sdk zu unserem Projekt hinzu. Öffne dafür die Datei pubspec.yaml und definiere das Package unter folgenden Abhängigkeiten:

dependencies:
  scanbot_sdk: ^1.0.0

‍

Nachdem die neuen Packages hinzugefĂĽgt wurden, mĂĽssen diese heruntergeladen und installiert werden. Dazu kehren wir wieder zum Flutter CLI zurĂĽck und fĂĽhren den folgenden Befehl aus:

$ flutter pub get

Android tunings

Um das neueste Scanbot Android SDK zu unterstĂĽtzen, mĂĽssen wir einige Gradle Einstellungen anpassen.

Da das von Flutter generierte Android Projekt auf einer älteren Kotlin Version 1.2.x basiert, müssen wir diese Version auf 1.3.x erhöhen. In der Top-Level-Datei android/build.gradle:

buildscript {
    ext.kotlin_version = '1.3.41'
    ...
}


Aktiviere auf Anwendungsebene in der Datei android/app/build.gradle die Option multidex und fĂĽge die folgenden packagingOptions hinzu:

android {
    ...
    defaultConfig {
      applicationId "com.example.myAwesomeFlutterApp"
      ...
      multiDexEnabled true
    }

    packagingOptions {
        pickFirst 'META-INF/atomicfu.kotlin_module'
        pickFirst 'META-INF/proguard/coroutines.pro'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/NOTICE'
    }
}


FĂĽge in der Datei android/app/src/main/AndroidManifest.xml die Erlaubnis CAMERA hinzu:

<manifest ...>
  <uses-permission android:name="android.permission.CAMERA" />
  ...
</manifest>

iOS Setup

Gib eine globale Plattform Version in der ios/Podfile Datei an, z.B.:

platform :ios, '9.0'


Dann installiere die Pods mit dem Befehl:

$ cd ios/
$ pod install


FĂĽge zum Abschluss die erforderliche NSCameraUsageDescription Eigenschaft in Xcode auf der Registerkarte Info der Einstellungen des Projekts (alias Info.plist Datei) hinzu:

NSCameraUsageDescription "Privacy - Camera Usage Description"

‍

‍

‍

‍

It’s coding time

Und jetzt lasst uns etwas Dart Code schreiben! Wir werden die Datei lib/main.dart anpassen, die der Einstiegspunkt der Flutter App ist.

Importiere die Scanbot SDK Klassen

FĂĽge die folgenden Importe einiger Scanbot SDK Packages und Flutter UI Widgets hinzu, die wir verwenden werden:

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scanbot_sdk/common_data.dart';
import 'package:scanbot_sdk/document_scan_data.dart';
import 'package:scanbot_sdk/scanbot_sdk.dart';
import 'package:scanbot_sdk/scanbot_sdk_models.dart';
import 'package:scanbot_sdk/scanbot_sdk_ui.dart';

Initialisiere das Scanbot SDK

Das Scanner SDK fĂĽr Flutter muss vor der Verwendung initialisiert werden. Verwende dazu die SDK API Methode ScanbotSdk.initScanbotSdk(config). Wir initialisieren das Scanbot SDK, wenn das Haupt Widget der Anwendung erstellt wird:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    ScanbotSdk.initScanbotSdk(ScanbotSdkConfig(
      loggingEnabled: true,
      licenseKey: "", // see the license key notes below!
    ));

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}


💡 Die vollständige API-Referenz des Scanbot SDK Flutter Plugins findest Du in unserer GitHub Dokumentation.

‍

‍

‍

‍

‍

Integriere die Dokumentenscanner Benutzeroberfläche

Das Scanbot Scanner SDK für das Flutter Plugin bietet eine Scanner-Benutzeroberfläche (UI) für das Scannen von Dokumenten. Der Dokumentenscanner ist eine komplette und gebrauchsfertige Bildschirmkomponente und kann mit nur wenigen Zeilen Code über die API-Methode ScanbotSdkUi.startDocumentScanner(config) einfach integriert werden.

Legen wir nun den SDK Aufruf in eine einfache Funktion namens scanDocument(), damit wir ihn an eine Schaltfläche binden können:

class _MyHomePageState extends State<MyHomePage> {

  void scanDocument() async {
    var config = DocumentScannerConfiguration(
      multiPageEnabled: false,
      bottomBarBackgroundColor: Colors.blueAccent,
      cancelButtonTitle: "Cancel",
      // see further configs ...
    );
    var result = await ScanbotSdkUi.startDocumentScanner(config);

    if (result.operationResult == OperationResult.SUCCESS) {
      // get and use the scanned images as pages: result.pages[n] ...
      displayPageImage(result.pages[0]);
    }
  }

  ...
}


đź’ˇ Ăśbrigens: Wir empfehlen das async/await Muster in Dart, welches auch aus anderen Sprachen wie C#, TypeScript, JavaScript, usw. bekannt ist.

FĂĽge nun das Flutter Widget CupertinoButton hinzu und binde unsere scanDocument() Methode als onPressed Ereignis ein:

CupertinoButton(
  child: Text("Scan a Document"),
  onPressed: scanDocument,
),


Mit der DocumentScannerConfiguration kann man Konfigurationsparameter ĂĽbergeben, um Farben, Textressourcen und einige Funktionsverhalten des Dokumentenscanners anzupassen. Weitere Einzelheiten findest Du in der API-Dokumentation.

Als Ergebnis gibt der Dokumentenscanner ein Array von Seitenobjekten (Page-Objekten) zurück, die das gescannte Dokument- und die Originalbilder enthalten. Ein Dokumentbild ist das beschnittene und perspektivisch korrigierte Bild (hochauflösend), während das Originalbild das unverarbeitete Bild (hochauflösend) ist. Alle Bilder werden standardmäßig als JPG-Dateien gespeichert und als Datei-URIs dargestellt (file:///...). Darüber hinaus stellt ein Seitenobjekt Vorschaubilder (niedrige Auflösung) zur Verfügung, die als Thumbnails zur Anzeige verwendet werden sollten.

Der Einfachheit halber haben wir in diesem Beispiel die Mehrseitenfunktion des Dokumentenscanners über den Konfigurationsparameter multiPageEnabled: false deaktiviert. So wird die Scanner-Benutzeroberfläche nach einem einzigen Scan automatisch geschlossen, und wir können die erste Page aus dem Array result.pages[0] verwenden, um das beschnittene Dokumentbild anzuzeigen.

Das gescannte Bild anzeigen

Verwende die JPG Datei URI eines Seitenobjektes page.documentPreviewImageFileUri, um ein Vorschaubild anzuzeigen. Dazu fĂĽgen wir ein weiteres Flutter Widget namens Image hinzu und speichern eine Instanz als Variable mit dem Namen currentPreviewImage. Um das letzte gescannte Seitenbild anzuzeigen, implementieren wir die einfache Methode displayPageImage(page), die den Status des currentPreviewImage Widgets aktualisiert:

class _MyHomePageState extends State<MyHomePage> {

  Image currentPreviewImage;

  void scanDocument() async { ... }

  void displayPageImage(Page page) {
    setState(() {
      currentPreviewImage = Image.file(File.fromUri(page.documentPreviewImageFileUri), width: 300, height: 300);
    });
  }

  ....
}


Und schlieĂźlich rendern wir das currentPreviewImage Widget direkt unter unserem CupertinoButton:

...
CupertinoButton(
  child: Text("Scan a Document"),
  onPressed: scanDocument,
),
if (currentPreviewImage != null) ... [
  Text("Document image:"),
  currentPreviewImage,
],

Vollständige Beispielprojekte

Um einen fliegenden Start zu ermöglichen, schau dir gerne die folgenden Beispielprojekte auf GitHub an:

Scanbot SDK (Test-) LizenzschlĂĽssel

Bitte beachte: Das Scanbot SDK läuft ohne einen Lizenzschlüssel (licenseKey) nur für eine Minute pro Sitzung! Nach Ablauf der Testperiode werden alle Scanbot Scanner SDK für Flutter Funktionen sowie die UI-Komponenten nicht mehr funktionieren oder werden beendet. Du kannst aber eine uneingeschränkte 30-Tage Testlizenz kostenlos erhalten. Schau Dir dafür das Formular für die Generierung einer Testlizenz auf unserer Website an.

Da der Scanbot SDK-Lizenzschlüssel an einen App Identifier (auch Application ID auf Android und Bundle Identifier auf iOS genannt) gebunden ist, musst Du den standardmäßig generierten App Identifier com.example.myAwesomeFlutterApp dieser Tutorial Anwendung verwenden. Natürlich kannst Du auch die ID Deiner Anwendung verwenden, um eine Testlizenz zu erhalten. Bitte beachte auch, dass bei den App-IDs die Groß- und Kleinschreibung berücksichtigt wird!

Um einen Lizenzschlüssel für beide Plattformen, Android und iOS, für diese Tutorial-Anwendung anzufordern, stelle sicher, dass die IDs der Anwendungen identisch sind. Typischerweise musst Du die App-ID des standardmäßig generierten Android-Projekts von com.example.my_awesome_flutter_app in com.example.myAwesomeFlutterApp ändern, da Flutter offenbar unterschiedliche IDs für diese beiden Plattformen generiert.

‍

Wo findet man den App Identifier?

‍

Happy coding! 👩💻👨💻

📌 Falls Sie hierbei, oder auch auf anderen Betriebssystemen und Frameworks, Hilfe benötigen, kontaktieren Sie gerne einen unserer Experten. Wir freuen uns auf Sie! Falls Sie mehr über Flutter erfahren möchten, schauen Sie sich gerne unseren Blogpost dazu an. Auch interessant: Unser React Native Tutorial!

Das Scanbot Fact Sheet: Alle Informationen auf einen Blick!

Scanbot verarbeitet und nutzt die angegebenen Informationen, um Sie bzgl. unserer Produkte zu kontaktieren und Ihnen den monatlichen Newsletter zuzusenden. Sie können diesen Service jederzeit deabonnieren. Hinweise zum Widerruf und zu der Verarbeitung Ihrer Daten finden Sie in unserer Datenschutzerklärung.

Bereit zum Ausprobieren?

Sprechen Sie mit einem unserer Lösungsexperten, um herauszufinden, wie wir Ihre Anforderungen an die mobile Datenerfassung lösen können, oder integrieren Sie das Scanbot SDK gleich in Ihre eigene mobile App oder Webseite.

Kontaktieren Sie uns
Jetzt testen

Entwickler, seid Ihr bereit loszulegen?

Das HinzufĂĽgen der kostenlosen 30-Tage Testlizenz zu Ihrer App ist einfach. Laden Sie das Scanbot SDK jetzt herunter und entdecken Sie die Vorteile der mobilen Datenerfassung.