Barcodes Scannen mit Google Flutter
In diesem Blogpost möchte ich kurz vorstellen, wie einfach sich die Abfrage von Bar- und QR-Codes in Flutter integrieren lässt. Dabei gehe ich zunächst kurz auf den Hintergrund ein und beschreibe dann die eigentliche Umsetzung.
Mehrwert
Die Hintergründe, warum Barcodes in eine App eingelesen werden sollen sind mannigfaltig. Im Grunde geht es aber immer um die schnelle Erfassung von Daten, die den Gebrauch der Anwendung vereinfacht oder beschleunigt. In unserem Fall soll die Suche nach bestimmten Informationen vereinfacht werden, indem man dem Nutzer - ohne langes Tippen - erlaubt, einfach einen Barcode zu scannen und so einen direkten Zugriff auf relevante Dokumente und Informationen ermöglicht.
Umsetzung
Für das hier beschriebene Beispiel kommt das Package flutter_barcode_scanner zum Einsatz, da es die Kameraabfrage und die eigentliche Barcode-Erkennung in einem Paket liefert. Wie gewohnt wird die Abhängigkeit in der pubspec.yaml Datei definiert und mittels des Terminalbefehls flutter pub get geladen.
dependencies:
flutter_barcode_scanner: ^1.0.2Für die Nutzung in iOS muss zusätzlich die Info.plist um den Schlüssel zur Karmeranutzung wie folgt ergänzt werden:
<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>Für Android sind keine weiteren Schritte vonnöten. Damit haben wir es schon fast geschafft. Die Verwendung wird mit einer simplen Zeile Code gestartet und liefert den erkannten Wert als Sting zurück:
String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode("#75042f", "Schließen", true, ScanMode.BARCODE);Als Parameter können (in Reihenfolge) die Farbe der Scan-Overlay Linie, der Text des Abbruch-Buttons, ein Boolean zum Aktivieren oder Deaktivieren des Blitzes und der Scan-Modus (entweder Barcodes oder QR-Codes) übergeben werden. Mehr benötigt es nicht um eine einfache Erkennung von Barcodes in die eigene Flutter-App zu integrieren.
Wer eine mächtigere Lösung benötigt oder generell mehr mit visueller Bilderkennung experimentieren will kann auch einen Blick auf Firebase ML Vision von Google werfen. Neben der Erkennung von Bardoces erlaubt es die Integration diverser weiterer Bildklassifikatoren, die auch direkt auf das Gerät geladen werden können. Um die Erfassung des Bildes muss man sich hier aber selbst kümmern.
Fazit
Ich hoffe der Blogpost hat gezeigt, dass die Integration von Barcode-Sannern in Flutter dank der aktiven Community ein Leichtes ist. Durch den geringen Aufwand kann so die Nutzererfahrung effizient gesteigert werden, sei es zur Beschleunigung einer Suche, der schnellen Eintragung von Daten oder der Abfrage von Coupon- oder Flyercodes.
Links
- flutter_barcode_scanner: https://pub.dev/packages/flutter_barcode_scanner
- firebase_ml_vision: https://pub.dev/packages/firebase_ml_vision
Flutter Reihe:
- Teil 1: Mobile App-Entwicklung mit Google Flutter
- Teil 2: Flutter und Dart im Einsatz für Apps – ein Erfahrungsbericht
- Teil 3: Animationen mit Flutter - das exensio Logo als Ladeanimation
- Teil 4: Flutter for Web mittels Google Cloud Bucket veröffentlichen
- Teil 5: Wie erstellt man Packages mit Google Flutter
- Teil 6: Barcodes Scannen mit Google Flutter
- Teil 7: Wie eine Google Flutter App sprechen lernt
- Teil 8: Flutter meets Video
- Teil 9: Flutter und schimmernde Skelette
- Teil 10: Flutter Design Series: Glas Morphismus
- Teil 11: App State-Management mit Flutter BLoC
- Teil 12: Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen
- Teil 13: Listen in Listen: Flutter Performance Optimierung