Intermediate: Scan and Pay Using Huawei Scan Kit (Flutter)

In this article, we will learn how to implement Huawei Scan kit while doing payment. We will be looking some of the APIs that Huawei scan kit provides and I will implement into hotel booking application while doing payment using QR Code.

Huawei Scan Kit

HUAWEI Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helping you quickly build barcode scanning functions into your apps. Huawei Scan kit supports 13 different formats of barcodes.

1D barcodes: EAN-8, EAN-13, UPC-A, UPC-E, Codabar, Code 39, Code 93, Code 128 and ITF

2D barcodes: QR Code, Data Matrix, PDF 417 and Aztec

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.

Scan kit can be called in four ways, from which you can choose as per requirement.

1. Default view

2. Customized view

3. Bitmap

4. Multiprocessor

Advantages

1. Uses multiple CV technologies to improve the scanning success rate and speed.

2. Allows you to directly call the preset scanning screen or customize the UI and process based on open APIs.

3. Supports mainstream code systems around the world. More code systems and scenarios will be supported later.

Requirements

1. Any operating system(i.e. MacOS, Linux and Windows)

2. Any IDE with Flutter SDK installed (i.e. IntelliJ, Android Studio and VsCode etc.)

3. A little knowledge of Dart and Flutter.

4. A Brain to think

Setting up the project

1. Before start creating application we have to make sure we connect our project to AppGallery. For more information check this link

2. App level gradle dependencies. Choose inside project Android > app > build.gradle.

apply plugin: 'com.android.application'

apply plugin: 'com.huawei.agconnect'

Root level gradle dependencies

maven {url 'https://developer.huawei.com/repo/'}

classpath 'com.huawei.agconnect:agcp:1.4.1.300'

Add permissions to AndroidManifest file.

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-feature android:name="android.hardware.camera" />

<uses-feature android:name="android.hardware.camera.autofocus" />

3. Refer this URL for cross-platform plugins. Download required plugins.

4. After completing all the above steps, you need to add the required kits’ Flutter plugins as dependencies to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions.

huawei_scan:

path: ../huawei_scan/

5. After adding them, run flutter pub get command. Now all the plugins are ready to use.

6. Open main.dart file to create UI and business logics.

Note: Set multiDexEnabled to true in the android/app directory, so the app will not crash.

Coding

Check Camera permission before you start scan.

Check whether your app has camera and storage permissions using hasCameraAndStoragePermission

await HmsScanPermissions.hasCameraAndStoragePermission();

In case app don’t have permissions then we need to call request permission using requestCameraAndStoragePermissions. Add the below code in “home.dart”

await HmsScanPermissions.requestCameraAndStoragePermissions()

@override
void initState() {
super.initState();
permissionRequest();
}

permissionRequest() async {
bool result =
await HmsScanPermissions.hasCameraAndStoragePermission();
if (result == false) {
await HmsScanPermissions.requestCameraAndStoragePermissions();
}
}

Customized View for this mode we don’t need to worry about developing the scanning process or camera control. Scan kit will control all the tasks.

Before calling startCustomizedViewAPI we need to create CustomizedViewRequest object to bring up the scanning UI. Add the below code in “home.dart”

CustomizedCameraListener field which returns ScanResponse object after each successful scan, to fulfill this need, using this listener you may collect your scan results in a list or trigger custom functions while scanning process continues. Add the below code in “home.dart”

customizedCameraListener: (ScanResponse response){
//Printing the result of each scan to debug console.
debugPrint(response.showResult);
//Collecting ScanRespone objects to a list.
setState(() {
results.add(response);
});
}

CustomizedLifeCycleListener field which returns CustomizedViewEvent object after each life cycle change to fulfill this need, you may trigger custom functions while scanning process continues. Add the below code in “home.dart”

customizedLifeCycleListener: (CustomizedViewEvent lifecycleStatus){
//Printing the result of each life cycle status to debug console.
debugPrint(“Customized View LifeCycle Listener: “+ lifecycleStatus.toString());
if (status == CustomizedViewEvent.onStart) {
Future.delayed(const Duration(seconds: 5), () async {
switchLightStatus();
});
}
}

void switchLightStatus() async {
isLightStatus = await HmsCustomizedView.getLightStatus();
if (isLightStatus == false) {
await HmsCustomizedView.switchLight();
}
}

Demo

Tips & Tricks

1. Download latest HMS Flutter plugin.

2. Set minSDK version to 19 or later.

3. Do not forget to click pug get after adding dependencies.

4. Latest HMS Core APK is required.

Conclusion

In this article, we have learned to develop simple hotel booking application.we have integrated Scan kit with Customize view while doing payment using QR Code.

Thanks for reading! If you enjoyed this story, please click the Like button and Follow. Feel free to leave a Comment 💬 below.

Reference

Scan Kit URL