How to Implement Flutter Barcode Scanner From Scratch
Since the new Flutter is not compatible with the old one, I refactored the APIs of the Flutter barcode plugin and added a new method to scan by video stream in real-time.
Join the DZone community and get the full member experience.Join For Free
About two years ago, I wrote an article sharing how to build a Flutter barcode plugin with Dynamsoft Barcode Reader step by step. At that time, Flutter was still under development and only supported Android and iOS. Nowadays, Google has released Flutter 2, which allows developers to build apps for mobile, web, and desktop from a single codebase. If you want to build cross-platform apps, it is worth putting much effort into Flutter from now on. Since the new Flutter is not compatible with the old one, I decide to refactor the APIs of the Flutter barcode plugin and add a new method to support barcode scanning by video stream in real-time.
Flutter Barcode SDK Plugin
In the following paragraphs, I will demonstrate how to develop a Flutter barcode plugin that supports reading barcodes from an image file and image buffer, as well as how to publish the plugin to pub.dev.
Developing Flutter Barcode SDK Plugin With Dynamsoft Barcode Reader
My current plan is to make the plugin work for Android. Therefore, I create the plugin package as follows:
flutter create --org com.dynamsoft --template=plugin --platforms=android -a java flutter_barcode_sdk
To add code for other platforms, such as iOS, to the plugin project, I can run:
flutter create --template=plugin --platforms=ios .
The plugin API is defined in the
lib/flutter_barcode_sdk.dart file, which is the bridge between Dart code and platform-specific code. A
android/src/main/java/com/dynamsoft/flutter_barcode_sdk/FlutterBarcodeSdkPlugin.java file is generated as the Android entry point.
Let’s get started with
The first step is to define a
BarcodeResult class, which contains barcode format, result, and coordinate points, for deserializing JSON data returned from platform-specific code:
decodeImageBuffer() respectively for picture and video stream scenarios:
_convertResults() function is used to convert
List<Map<dynamic, dynamic>> type to
When invoking Flutter API, the Android
onMethodCall() function will be triggered:
Here are the basic steps for platform-specific code:
- Extract the arguments from the Dart framework.
- Process the image data.
- Return the results.
decodeImageBuffer method is designed for camera stream. To avoid blocking the main thread, I use
SingleThreadExectuor to deal with the CPU-intensive work in a worker thread.
Publishing Flutter Barcode SDK Plugin to Pub.dev
Prior to publishing the plugin, you’d better pass analysis by running the command:
flutter pub publish --dry-run
If there is no error, you can publish the package to pub.dev:
flutter pub publish
I have successfully published the Flutter barcode SDK to https://pub.dev/packages/flutter_barcode_sdk.
Flutter Barcode Scanner
Once the plugin is done, it is time to build a barcode scanner app with a few lines of Dart code.
First, I add the Flutter camera plugin and flutter_barcode_sdk to the
Then, initialize the camera and barcode reader objects in
The app consists of a camera view, a text widget and two button widgets:
videoScan() function, I invoke startImageStream() to continuously get the latest video frame and call the barcode decoding API:
pictureScan() function reads barcode from an image and show the image and results on a picture screen:
Finally, I can build and run the app:
A test for recognizing the 1D barcode and QR code on the Raspberry Pi packing box.
Video Barcode Scan
Picture Barcode Scan
iOS, Web, and Windows.
Published at DZone with permission of Xiao Ling. See the original article here.
Opinions expressed by DZone contributors are their own.