Implement a Flutter Plugin - QR Code Scanner from Live Video Stream
In this article, I will walk you through how to implement a lightweight Flutter QR code scanner plugin. The plugin supports scanning QR Codes from live video streams of Android phones. You can find the package on pub.dev.
Supported symbologies include QR Codes, linear codes, PDF417, and more.
This article is Part 1 in a 2-Part Series.
About the QR Code Scanner Plugin
The Flutter plugin is published on pub.dev with an installation guide and example code.
https://pub.dev/packages/flutter_camera_qrcode_scanner
Licensing
To request a license to activate the QR code detection APIs, please visit:
How is the Flutter QR Code Scanner Plugin Implemented
Installation
The plugin is built with Dynamsoft Camera Enhancer and Dynamsoft Barcode Reader.
-
allprojects { repositories { google() jcenter() maven { url "https://download2.dynamsoft.com/maven/dce/aar" } } } dependencies { implementation 'com.dynamsoft:dynamsoftcameraenhancer:2.1.3@aar' }
-
allprojects { repositories { google() jcenter() maven { url "https://download2.dynamsoft.com/maven/dbr/aar" } } } dependencies { implementation 'com.dynamsoft:dynamsoftbarcodereader:9.0.1@aar' }
Creating A Simple Flutter Widget from Android TextView
In this section, let’s follow Flutter’s tutorial to host an Android TextView
in Flutter widget with PlatformView
.
-
Create a new Flutter plugin project:
flutter create --org com.dynamsoft --template=plugin --platforms=android -a java flutter_qrcode_scanner
-
On the Dart side, we can see the following code in
lib/flutter_qrcode_scanner.dart
:import 'dart:async'; import 'package:flutter/services.dart'; class FlutterQrcodeScanner { static const MethodChannel _channel = MethodChannel('flutter_qrcode_scanner'); static Future<String?> get platformVersion async { final String? version = await _channel.invokeMethod('getPlatformVersion'); return version; } }
Delete the code snippet above, and define a stateful widget as follows:
class ScannerView extends StatefulWidget { const ScannerView({Key? key}) : super(key: key); @override State<StatefulWidget> createState() => _ScannerViewState(); } class _ScannerViewState extends State<ScannerView> { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { const String viewType = 'com.dynamsoft.flutter_qrcode_scanner/nativeview'; final Map<String, dynamic> creationParams = <String, dynamic>{}; return AndroidView( viewType: viewType, creationParams: creationParams, creationParamsCodec: const StandardMessageCodec(), ); } }
-
On the platform side, we create
NativeView
class which extendsio.flutter.plugin.platform.PlatformView
to provide a reference toTextView
:import android.content.Context; import android.graphics.Color; import android.view.View; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import io.flutter.plugin.platform.PlatformView; import java.util.Map; class NativeView implements PlatformView { @NonNull private final TextView textView; NativeView(@NonNull Context context, int id, @Nullable Map<String, Object> creationParams) { textView = new TextView(context); textView.setTextSize(72); textView.setBackgroundColor(Color.rgb(255, 255, 255)); textView.setText("Rendered on a native Android view (id: " + id + ")"); } @NonNull @Override public View getView() { return textView; } @Override public void dispose() {} }
Then create a
NativeViewFactory
class to initializeNativeView
:import android.content.Context; import android.view.View; import androidx.annotation.Nullable; import androidx.annotation.NonNull; import io.flutter.plugin.common.BinaryMessenger; import io.flutter.plugin.common.StandardMessageCodec; import io.flutter.plugin.platform.PlatformView; import io.flutter.plugin.platform.PlatformViewFactory; import java.util.Map; class NativeViewFactory extends PlatformViewFactory { @NonNull private final BinaryMessenger messenger; NativeViewFactory(@NonNull BinaryMessenger messenger) { super(StandardMessageCodec.INSTANCE); this.messenger = messenger; } @NonNull @Override public PlatformView create(@NonNull Context context, int id, @Nullable Object args) { final Map<String, Object> creationParams = (Map<String, Object>) args; return new NativeView(context, id, creationParams); } }
In
FlutterQrcodeScannerPlugin.java
file, we register the factory class:@Override public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) { channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "flutter_qrcode_scanner"); channel.setMethodCallHandler(this); flutterPluginBinding.getPlatformViewRegistry().registerViewFactory( "com.dynamsoft.flutter_qrcode_scanner/nativeview", new NativeViewFactory(flutterPluginBinding.getBinaryMessenger())); }
Now, the plugin is ready to be used. We change the code of example/lib/main.dart
to make it work:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_qrcode_scanner/flutter_qrcode_scanner.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: ScannerView(),
),
),
);
}
}
Run the example:
flutter run
Implementing a Flutter Camera Widget from Android Camera View
If the code above can work for you, the next step is to replace the text view with a camera view.
If you want to create a Flutter camera application, a quick way is to install the official Camera plugin. However, the plugin is still under development, and there are no vision APIs available yet. Here we use Dynamsoft Camera Enhancer as an example.
-
Configure
android/build.gradle
:rootProject.allprojects { repositories { google() mavenCentral() maven { url "https://download2.dynamsoft.com/maven/dce/aar" } } } android { compileSdkVersion 30 compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { minSdkVersion 21 } } dependencies { implementation 'com.dynamsoft:dynamsoftcameraenhancer:2.1.3@aar' }
The minimum Android SDK version needs to be changed to 21 or higher.
-
In
NativeView.java
, import the camera package:import com.dynamsoft.dce.*;
Change
TextView
toDCECameraView
. WithCameraEnhancer
, we can start and stop the camera preview:private final DCECameraView cameraView; private CameraEnhancer cameraEnhancer; NativeView(BinaryMessenger messenger, @NonNull Activity context, int id, @Nullable Map<String, Object> creationParams) { this.context = context; cameraEnhancer = new CameraEnhancer(context); cameraView = new DCECameraView(context); cameraEnhancer.setCameraView(cameraView); try { cameraEnhancer.open(); } catch (Exception e) { e.printStackTrace(); } }
In order to switch camera status along with activity lifecycle, we implement
Application.ActivityLifecycleCallbacks
:class NativeView implements PlatformView, Application.ActivityLifecycleCallbacks { @Override public void onActivityResumed(Activity activity) { try { cameraEnhancer.open(); } catch (Exception e) { e.printStackTrace(); } } @Override public void onActivityPaused(Activity activity) { try { cameraEnhancer.close(); } catch (Exception e) { e.printStackTrace(); } } }
-
You may have noticed that we use
Activity
instead ofContext
inNativeView
class. So theNativeViewFactory
class needs to be changed as well:class NativeViewFactory extends PlatformViewFactory { @NonNull private final BinaryMessenger messenger; @NonNull private Activity activity; NativeViewFactory(@NonNull BinaryMessenger messenger, Activity activity) { super(StandardMessageCodec.INSTANCE); this.messenger = messenger; this.activity = activity; } @NonNull @Override public PlatformView create(@NonNull Context context, int id, @Nullable Object args) { final Map<String, Object> creationParams = (Map<String, Object>) args; return new NativeView(messenger, activity, id, creationParams); } }
-
Finally, in
FlutterQrcodeScannerPlugin
class, we monitor activity status and pass the activity reference toNativeViewFactory
instance:public class FlutterQrcodeScannerPlugin implements FlutterPlugin, ActivityAware { private Activity activity; private FlutterPluginBinding flutterPluginBinding; @Override public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) { this.flutterPluginBinding = flutterPluginBinding; } @Override public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) { this.flutterPluginBinding = null; } @Override public void onAttachedToActivity(ActivityPluginBinding activityPluginBinding) { bind(activityPluginBinding); } @Override public void onReattachedToActivityForConfigChanges(ActivityPluginBinding activityPluginBinding) { bind(activityPluginBinding); } @Override public void onDetachedFromActivityForConfigChanges() { activity = null; } @Override public void onDetachedFromActivity() { activity = null; } private void bind(ActivityPluginBinding activityPluginBinding) { activity = activityPluginBinding.getActivity(); flutterPluginBinding.getPlatformViewRegistry().registerViewFactory( "com.dynamsoft.flutter_qrcode_scanner/nativeview", new NativeViewFactory(flutterPluginBinding.getBinaryMessenger(), activity)); } }
A Flutter camera view widget is done. But before running the example, we have to change the minimum SDK version to 21 in example/android/build.gradle
.
Turning Flutter Camera Plugin into Flutter QR Code Scanner
Generally, we can take camera frames from preview callback function and do further image processing. To save developer’s time, a good camera widget should provide vision functionalities. In the following paragraph, you will see how to integrate Dynamsoft Barcode Reader SDK into the current Flutter camera view widget step by step.
-
The same to using the camera SDK, we add the barcode package to
build.gradle
:rootProject.allprojects { repositories { google() mavenCentral() maven { url "https://download2.dynamsoft.com/maven/dce/aar" } maven { url "https://download2.dynamsoft.com/maven/dbr/aar" } } } android { compileSdkVersion 30 compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { minSdkVersion 21 } } dependencies { implementation 'com.dynamsoft:dynamsoftcameraenhancer:2.1.3@aar' implementation 'com.dynamsoft:dynamsoftbarcodereader:9.0.1@aar' }
-
Dynamsoft Camera Enhancer and Dynamsoft Barcode Reader SDK can co-work well. We put them into a
QRCodeScanner.java
file to implement real-time QR code scanning:public class QRCodeScanner { private CameraEnhancer mCameraEnhancer; private BarcodeReader reader; private Activity context; private DCECameraView cameraView; private DetectionHandler handler; public interface DetectionHandler { public void onDetected(List<Map<String, Object>> data); } public void init(Activity context, DCECameraView cameraView) { this.context = context; this.cameraView = cameraView; mCameraEnhancer = new CameraEnhancer(context); mCameraEnhancer.setCameraView(cameraView); cameraView.setOverlayVisible(true); try { reader = new BarcodeReader(); reader.setCameraEnhancer(mCameraEnhancer); reader.setTextResultListener(mTextResultCallback); } catch (Exception e) { // TODO: handle exception } } TextResultCallback mTextResultCallback = new TextResultCallback() { @Override public void textResultCallback(int i, TextResult[] results, Object userData) { if (results != null) { final List<Map<String, Object>> ret = new ArrayList<Map<String, Object>>(); for (TextResult result: results) { final Map<String, Object> data = new HashMap<>(); data.put("format", result.barcodeFormatString); data.put("text", result.barcodeText); data.put("x1", result.localizationResult.resultPoints[0].x); data.put("y1", result.localizationResult.resultPoints[0].y); data.put("x2", result.localizationResult.resultPoints[1].x); data.put("y2", result.localizationResult.resultPoints[1].y); data.put("x3", result.localizationResult.resultPoints[2].x); data.put("y3", result.localizationResult.resultPoints[2].y); data.put("x4", result.localizationResult.resultPoints[3].x); data.put("y4", result.localizationResult.resultPoints[3].y); data.put("angle", result.localizationResult.angle); ret.add(data); } if (handler != null) { handler.onDetected(ret); } } } }; public void setDetectionHandler(DetectionHandler handler) { this.handler = handler; } public void stopScan() { try { mCameraEnhancer.close(); cameraView.setOverlayVisible(false); reader.stopScanning(); } catch (Exception e) { // TODO: handle exception } } public void startScan() { try { mCameraEnhancer.open(); cameraView.setOverlayVisible(true); reader.startScanning(); } catch (Exception e) { // TODO: handle exception } } public void setLicense(String license, final Result result) { BarcodeReader.initLicense( license, new DBRLicenseVerificationListener() { @Override public void DBRLicenseVerificationCallback(boolean isSuccessful, Exception e) { result.success(""); } }); } }
To activate the QR code detection API, a valid license is required.
-
As a QR code detected, we need a way to send the results from Java to Dart. The
MethodChannel
class is used to send and receive messages between Dart and native code. Therefore, we add the following code toNativeView.java
:class NativeView implements PlatformView, MethodCallHandler, Application.ActivityLifecycleCallbacks, QRCodeScanner.DetectionHandler { @Override public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) { switch (call.method) { case "init": qrCodeScanner.init(context, cameraView); result.success(null); break; case "startScanning": qrCodeScanner.startScan(); result.success(null); break; case "stopScanning": qrCodeScanner.stopScan(); result.success(null); break; case "setLicense": final String license = call.argument("license"); qrCodeScanner.setLicense(license, result); break; case "setBarcodeFormats": final int formats = call.argument("formats"); qrCodeScanner.setBarcodeFormats(formats); result.success(null); break; default: result.notImplemented(); } } }
When QR code is detected, the
onDetected
callback function will be triggered. One thing you have to know is the function is called by a worker thread, whereas the method channel communication has to be invoked in the main thread. To achieve this, we userunOnUiThread
to send messages to the main thread:@Override public void onDetected(List<Map<String, Object>> data) { context.runOnUiThread(new Runnable() { @Override public void run() { methodChannel.invokeMethod("onDetected", data); } }); }
-
On the Dart side, we define a
ScannerViewController
influtter_qrcode_scanner.dart
to receive QR code detection results:class _ScannerViewState extends State<ScannerView> { ScannerViewController? _controller; @override void initState() { super.initState(); } @override Widget build(BuildContext context) { const String viewType = 'com.dynamsoft.flutter_qrcode_scanner/nativeview'; final Map<String, dynamic> creationParams = <String, dynamic>{}; return AndroidView( viewType: viewType, onPlatformViewCreated: _onPlatformViewCreated, creationParams: creationParams, creationParamsCodec: const StandardMessageCodec(), ); } void _onPlatformViewCreated(int id) { _controller = ScannerViewController(id); widget.onScannerViewCreated(_controller!); } } class ScannerViewController { late MethodChannel _channel; final StreamController<List<BarcodeResult>> _streamController = StreamController<List<BarcodeResult>>(); Stream<List<BarcodeResult>> get scannedDataStream => _streamController.stream; ScannerViewController(int id) { _channel = MethodChannel('com.dynamsoft.flutter_qrcode_scanner/nativeview_$id'); _channel.setMethodCallHandler((call) async { switch (call.method) { case 'onDetected': if (call.arguments != null) { List<BarcodeResult> data = fromPlatformData(call.arguments as List); _streamController.sink.add(data); } break; } }); } }
The functions for invoking native methods include:
Future<void> startScanning() async { await _channel.invokeMethod('startScanning'); } Future<void> stopScanning() async { await _channel.invokeMethod('stopScanning'); } /// Apply for a 30-day FREE trial license: https://www.dynamsoft.com/customer/license/trialLicense Future<void> setLicense(String license) async { await _channel.invokeMethod('setLicense', {'license': license}); }
So far, the Flutter QR code scanner plugin has been completely finished. Here is the full example of a simple QR code scanner:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_camera_qrcode_scanner/flutter_qrcode_scanner.dart';
import 'package:flutter_camera_qrcode_scanner/dynamsoft_barcode.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ScannerViewController? controller;
String _barcodeResults = '';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('QR Code Scanner'),
),
body: Stack(children: <Widget>[
ScannerView(onScannerViewCreated: onScannerViewCreated),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 100,
child: SingleChildScrollView(
child: Text(
_barcodeResults,
style: TextStyle(fontSize: 14, color: Colors.white),
),
),
),
Container(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
child: Text('Start Scan'),
textColor: Colors.white,
color: Colors.blue,
onPressed: () async {
controller!.startScanning();
}),
MaterialButton(
child: Text("Stop Scan"),
textColor: Colors.white,
color: Colors.blue,
onPressed: () async {
controller!.stopScanning();
})
]),
),
],
)
]),
),
);
}
void onScannerViewCreated(ScannerViewController controller) async {
setState(() {
this.controller = controller;
});
await controller.setLicense(
'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==');
await controller.init();
await controller.startScanning(); // auto start scanning
controller.scannedDataStream.listen((results) {
setState(() {
_barcodeResults = getBarcodeResults(results);
});
});
}
String getBarcodeResults(List<BarcodeResult> results) {
StringBuffer sb = new StringBuffer();
for (BarcodeResult result in results) {
sb.write(result.format);
sb.write("\n");
sb.write(result.text);
sb.write("\n\n");
}
if (results.isEmpty) sb.write("No QR Code Detected");
return sb.toString();
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
}