How to Implement a Flutter QR Code Scanner Plugin from Scratch

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. This article will show you how to implement a custom Flutter camera view widget by wrapping an Android native camera view which supports QR code scanning.

Installation

Dynamsoft Barcode Reader:

Dynamsoft Camera Enhancer:

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:

On the Dart side, we can see the following code in lib/flutter_qrcode_scanner.dart:

Delete the code snippet above, and define a stateful widget as follows:

On the platform side, we create NativeView class which extends io.flutter.plugin.platform.PlatformView to provide a reference to TextView:

Then create a NativeViewFactory class to initialize NativeView:

In FlutterQrcodeScannerPlugin.java file, we register the factory class:

Now, the plugin is ready to be used. We change the code of example/lib/main.dart to make it work:

Run the example:

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. Here we use Dynamsoft Camera Enhancer as an example.

Configure android/build.gradle:

The minimum Android SDK version needs to be changed to 21 or higher.

In NativeView.java, import the camera package:

Change TextView to DCECameraView. With CameraEnhancer, we can start and stop the camera preview:

In order to switch camera status along with activity lifecycle, we implement Application.ActivityLifecycleCallbacks:

You may have noticed that we use Activity instead of Context in NativeView class. So the NativeViewFactory class needs to be changed as well:

Finally, in FlutterQrcodeScannerPlugin class, we monitor activity status and pass the activity reference to NativeViewFactory instance:

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:

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:

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 to NativeView.java:

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 use runOnUiThread to send messages to the main thread:

On the Dart side, we define a ScannerViewController in flutter_qrcode_scanner.dart to receive QR code detection results:

The functions for invoking native methods include:

So far, the Flutter QR code scanner plugin has been completely finished. Here is the full example of a simple QR code scanner:

Download Flutter QR Code Scanner from pub.dev

https://pub.dev/packages/flutter_camera_qrcode_scanner

Source Code

https://github.com/yushulx/flutter_qrcode_scanner

Originally published at https://www.dynamsoft.com on October 28, 2021.

Manager of Dynamsoft Open Source Projects | Tech Lover