Integrate HMS Scan Kit to Flutter Projects and Make a Flight Ticket App - Huawei Developers

Learn how to create a flight ticket app that includes the Huawei Scan Kit using the Flutter SDK.
Original link: https://forums.developer.huawei.com/forumPortal/en/topic/0204446847731810079
Introduction
In this article, I am going to be doing a flight ticket barcode scanning and barcode creation application with Flutter. We will be looking at some of the APIs that Huawei Scan Kit provides and learn how to use them in our flight ticket projects.
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.
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.
Configuring The Project
Before you get started, you must register as a HUAWEI developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.
Create an app in your project is required in App Gallery Connect in order to communicate with Huawei services.
Creating Project in App Gallery Connect
★ Sign in to AppGallery Connect and select My projects. Click your project from the project list.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
★ Go to Project Setting > General information, and click Add app. If an app exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app and enter app information, and click OK.
★ Open your Android Studio and create a Flutter application. The package name of the application must match the package name of the application you created in App Gallery Connect.
★ To use HUAWEI Scan APIs, you need to enable the scan service first. For more information, please refer to Enabling Services.
Configuring the Signing Certificate Fingerprint
· Go to Project Setting > General information. In the App information field, click the add your SHA256 fingerprint.
· After completing the configuration, click(✓) check mark.
Permissions
In order to make your scan work perfectly, you need to add the permissions below in AndroidManifest.xml file.
Integrating HMS and Scan Plugin to Your Flutter Project
· Check whether the agconnect-services.json file and signature file are successfully added to the android/app directory of the Flutter project.
· Add the Maven repository address and AppGallery Connect service dependencies into the android/build.gradle file.
buildscript { repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
· Configure the Maven repository address for the HMS Core SDK in allprojects.
allprojects { repositories { google() jcenter() maven { url 'https://developer.huawei.com/repo/' } }}
· Add the apply plugin: ‘com.huawei.agconnect’ line after the apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle” line.
apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"apply plugin: 'com.huawei.agconnect'
· Open your app level build.gradle (android/app/build.gradle) file and set minSdkVersion to 19 or higher in defaultConfig. (applicationId must match the package_name entry in the agconnect-services.json file)
defaultConfig { applicationId "<package_name>" minSdkVersion 19 /* * <Other configurations> */ }
· Configure the signature in android(android/app/build.gradle) according to the signature file information.
Code:
/* * <Other configurations> */ signingConfigs { config { storeFile file('<keystore_file>.jks') storePassword '<keystore_password>' keyAlias '<key_alias>' keyPassword '<key_password>' } } buildTypes { debug { signingConfig signingConfigs.config } release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.config } }}
Add Dependencies to ‘pubspec.yaml’
On your Flutter project directory find and open your pubspec.yaml file of your project and add Huawei Scan Plugin as a dependency. Run flutter pub get command to integrate Scan Plugin to your project.
There are all plugins in pub.dev with the latest versions. If you downloaded the package from pub.dev, specify the package in your pubspec.yaml file. Then, run flutter pub get command.
· Scan Kit Plugin for Flutter
We’re done with the integration part! Now, we are ready to make our flight ticket application ✓
Make a Flight Ticket App with Flutter
Scan Screen
In this application, we are going to use two features of the Huawei Scan Kit. The first is startDefaultView and we are going to use it to scan the barcode of the tickets. The second is buildBitmap and we are going to use that to generate the ticket barcode.
So let’s start by adding buttons to the main.dart with which we can integrate these two features.
Flight Ticket Scan Screen With startDefaultView
In order to scan flight ticket barcodes, we’ll call the startDefaultView method via the scanUtils class and pass the request result from the DefaultViewRequest to it. In return, this method gives us the scan response result through ScanResponse class.
Let’s create a BoardingPassParser.dart class to parse the data from the result according to flight rules. Also, let’s instance the passenger data details from the Passenger.dart class.
If you want to see the full code, please see the github page.
Now, that we have adjusted our scan result according to flight data, we can show it in Ui. If the barcode is not a flight ticket barcode, it’ll send us a CustomAlertDialog widget in CustomUi class.
Note: I won’t give Ui codes here as it is out of our purpose using the Huawei Scan kit. You can access all the code in the ScanScreen.dart class from Github.
Conclusion
In this article, you learned how you can integrate the HMS Scan Kit with your Flutter projects. We saw, how we can easily use the services such as scanning and barcode generation provided by the Scan kit in your applications, it is time to explore other Huawei kits. I leave a few links below for this and finally, you can find the github link I used for Ui design in the references section. This design was really enjoyable.
For more details, you can go to:
Our official website: https://developer.huawei.com/consumer/en/hms?ha_source=hms1
Our Development Documentation page, to find the documents you need: https://developer.huawei.com/consumer/en/doc/development?ha_source=hms1
Reddit to join our developer discussion: https://www.reddit.com/r/HuaweiDevelopers/
GitHub to download demos and sample codes: https://github.com/HMS-Core
Stack Overflow to solve any integration problems: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

---

John Wo said:
Learn how to create a flight ticket app that includes the Huawei Scan Kit using the Flutter SDK.
Original link: https://forums.developer.huawei.com/forumPortal/en/topic/0204446847731810079
Introduction
In this article, I am going to be doing a flight ticket barcode scanning and barcode creation application with Flutter. We will be looking at some of the APIs that Huawei Scan Kit provides and learn how to use them in our flight ticket projects.
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.
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.
Configuring The Project
Before you get started, you must register as a HUAWEI developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.
Create an app in your project is required in App Gallery Connect in order to communicate with Huawei services.
Creating Project in App Gallery Connect
★ Sign in to AppGallery Connect and select My projects. Click your project from the project list.
★ Go to Project Setting > General information, and click Add app. If an app exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app and enter app information, and click OK.
★ Open your Android Studio and create a Flutter application. The package name of the application must match the package name of the application you created in App Gallery Connect.
★ To use HUAWEI Scan APIs, you need to enable the scan service first. For more information, please refer to Enabling Services.
Configuring the Signing Certificate Fingerprint
· Go to Project Setting > General information. In the App information field, click the add your SHA256 fingerprint.
· After completing the configuration, click(✓) check mark.
Permissions
In order to make your scan work perfectly, you need to add the permissions below in AndroidManifest.xml file.
Integrating HMS and Scan Plugin to Your Flutter Project
· Check whether the agconnect-services.json file and signature file are successfully added to the android/app directory of the Flutter project.
· Add the Maven repository address and AppGallery Connect service dependencies into the android/build.gradle file.
buildscript { repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
· Configure the Maven repository address for the HMS Core SDK in allprojects.
allprojects { repositories { google() jcenter() maven { url 'https://developer.huawei.com/repo/' } }}
· Add the apply plugin: ‘com.huawei.agconnect’ line after the apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle” line.
apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"apply plugin: 'com.huawei.agconnect'
· Open your app level build.gradle (android/app/build.gradle) file and set minSdkVersion to 19 or higher in defaultConfig. (applicationId must match the package_name entry in the agconnect-services.json file)
defaultConfig { applicationId "<package_name>" minSdkVersion 19 /* * <Other configurations> */ }
· Configure the signature in android(android/app/build.gradle) according to the signature file information.
Code:
/* * <Other configurations> */ signingConfigs { config { storeFile file('<keystore_file>.jks') storePassword '<keystore_password>' keyAlias '<key_alias>' keyPassword '<key_password>' } } buildTypes { debug { signingConfig signingConfigs.config } release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.config } }}
Add Dependencies to ‘pubspec.yaml’
On your Flutter project directory find and open your pubspec.yaml file of your project and add Huawei Scan Plugin as a dependency. Run flutter pub get command to integrate Scan Plugin to your project.
There are all plugins in pub.dev with the latest versions. If you downloaded the package from pub.dev, specify the package in your pubspec.yaml file. Then, run flutter pub get command.
· Scan Kit Plugin for Flutter
We’re done with the integration part! Now, we are ready to make our flight ticket application ✓
Make a Flight Ticket App with Flutter
Scan Screen
In this application, we are going to use two features of the Huawei Scan Kit. The first is startDefaultView and we are going to use it to scan the barcode of the tickets. The second is buildBitmap and we are going to use that to generate the ticket barcode.
So let’s start by adding buttons to the main.dart with which we can integrate these two features.
Flight Ticket Scan Screen With startDefaultView
In order to scan flight ticket barcodes, we’ll call the startDefaultView method via the scanUtils class and pass the request result from the DefaultViewRequest to it. In return, this method gives us the scan response result through ScanResponse class.
Let’s create a BoardingPassParser.dart class to parse the data from the result according to flight rules. Also, let’s instance the passenger data details from the Passenger.dart class.
If you want to see the full code, please see the github page.
Now, that we have adjusted our scan result according to flight data, we can show it in Ui. If the barcode is not a flight ticket barcode, it’ll send us a CustomAlertDialog widget in CustomUi class.
Note: I won’t give Ui codes here as it is out of our purpose using the Huawei Scan kit. You can access all the code in the ScanScreen.dart class from Github.
Conclusion
In this article, you learned how you can integrate the HMS Scan Kit with your Flutter projects. We saw, how we can easily use the services such as scanning and barcode generation provided by the Scan kit in your applications, it is time to explore other Huawei kits. I leave a few links below for this and finally, you can find the github link I used for Ui design in the references section. This design was really enjoyable.
For more details, you can go to:
Our official website: https://developer.huawei.com/consumer/en/hms?ha_source=hms1
Our Development Documentation page, to find the documents you need: https://developer.huawei.com/consumer/en/doc/development?ha_source=hms1
Reddit to join our developer discussion: https://www.reddit.com/r/HuaweiDevelopers/
GitHub to download demos and sample codes: https://github.com/HMS-Core
Stack Overflow to solve any integration problems: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest
Click to expand...
Click to collapse

---

Well explained, what are all the permissions required.

---

Does service supports for IOS?