Scan Kit | Flutter
Hello everyone, in this article, we’ll develop a flutter application using the Huawei Scan kit. Lets get start it.
About the Service
HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes as well as generates barcodes to help you quickly build barcode scanning functions into your apps.
Scan Kit automatically detects, magnifies, and recognizes barcodes from a distance, and is also able to scan a very small barcode in the same way. It works even in suboptimal situations, such as under dim lighting or when the barcode is reflective, dirty, blurry, or printed on a cylindrical surface. This leads to a higher scanning success rate, and an improved user experience.
Configure your project on AppGallery Connect
Registering a Huawei ID
You need to register a Huawei ID to use the plugin. If you don’t have one, follow the instructions here.
Preparations for Integrating HUAWEI HMS Core
First of all, you need to integrate Huawei Mobile Services with your application. I will not get into details about how to integrate your application but you can use this tutorial as step by step guide.
Integrating the Flutter ML Plugin
1. Download the Scan Flutter Plugin and decompress it.
2. On your Flutter project directory find and open your pubspec.yaml file and add library to dependencies to download the package from pub.dev. Or if you downloaded the package from the HUAWEI Developer website, specify the library path on your local device. For both ways, after running pub get command, the plugin will be ready to use.
1. Default View
In Default View mode, Scan Kit scans the barcodes using the camera or from images in the album. You do not need to worry about designing a UI as Scan Kit provides one.
Development Process
Construct a DefaultViewRequest object
Call the startDefaultView API with the request object to bring up the scanning UI.
Obtain the scanning result of Default View using ScanResponse class.
Here’s the result.
2. Customized View
In Customized View mode, you do not need to worry about developing the scanning process or camera control. Scan Kit will do all these tasks for you. However, you will need to customize the scanning UI according to the customization options that Flutter Scan Plugin provides. This can also be easily completed based on the sample code below.
Development Process
Optional parameters has default values. For more detailed information please refer to CustomizedViewRequest.
Call the startCustomizedView API with the request object to bring up the scanning UI.
Obtain the scanning result of Customized View using ScanResponse class.
Listening The Customized View on Continuous Scan Mode
The Customized View mode has a feature to listen the scanning results in continuous scan mode. Thus, you may want to interfere the scanning process in order to both collect the scanning results and run your custom functions with the obtained results. CustomizedViewRequest has customizedCameraListener field which returns ScanResponse object after each successful scan, to fullfil this need. Using this listener you may collect your scan results in a list or trigger custom functions while scanning process continues.
Create a CustomizedViewRequest object.
Using CustomizedViewRequest objects customizedCameraListener field, write your custom function to run after each successful scan.
Call the startCustomizedView API to bring up the scanning UI.
Obtain the results from the ScanResponse list.
Listening Customized View’s LifeCycle Events
The Customized View mode has also a feature to listen Life Cycle Events of customized view. Thus, you may want to interfere the scanning process in order to run your custom functions on life cycle changes. CustomizedViewRequest has customizedLifeCycleListener field which returns CustomizedViewEvent object after each life cycle change, to fullfil this need. You may trigger custom functions while scanning process continues.
Create a CustomizedViewRequest object.
Using CustomizedViewRequest objects customizedLifeCycleListener field, write your custom function to run after each life cycle change.
Call the startCustomizedView API to bring up the scanning UI.
Here’s the result.
3. MultiProcessor Camera
MultiProcessor Camera Mode is used to recognize multiple barcodes simultaneously from the scanning UI or from the gallery. Scanning results will be returned as a list and during the scanning, the scanned barcodes will be caught by rectangles and their values will be shown on the scanning UI. In MultiProcessor Camera mode, you do not need to worry about developing the scanning process or camera control. Scan Kit will do all these tasks for you. However, you will need to customize the scanning UI according to the customization options that Flutter Scan Plugin provides. This can also be easily completed based on sample code below.
Development Process
Optional parameters has default values. For more detailed information please refer to MultiCameraRequest.
Call the startMultiProcessorCamera API with the request object to bring up the scanning UI.
Obtain the scanning result of MultiProcessor Camera using ScanResponseList class.
Text Options for Multi Processor Camera
Since Multi Processor’s Camera is customizable, you may also customize the texts that show the contents of scanned barcodes, and their appearances during the scanning process.
Optional parameters has default values. For more detailed information please refer to ScanTextOptions.
Call the startMultiProcessorCamera API with the request object to bring up the scanning UI.
Listening The Multi Processor Camera
Multi Processor Camera Mode, compared to Default View and Customized View modes, is designed to continue to scanning barcodes after successfully identify the first barcode. Thus, you may want to interfere the scanning process in order to both collect the scanning results and run your custom functions with the obtained results. MultiCameraRequest has cameraListener field which returns ScanResponse object after each successful scan, to fullfil this need. Using this listener you may collect your scan results in a list or trigger custom functions while scanning process continues.
Create a MultiCameraRequest object.
Using MultiCameraRequest objects multiCameraListener field, write your custom function to run after each successful scan.
Call the startMultiProcessorCamera API to bring up the scanning UI.
Obtain the results from the ScanResponse list.
Here’s the result.
