Integrating Huawei Scan-Kit in Flutter - Huawei Developers

Introduction
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 also can 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. Huawei Scan kit has a higher scanning success rate.
There are three type of scan type.
1. Default View
2. Customized View
3. Multiprocessor Camera
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.
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.
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.
In this article, we will learn Default view and Customized view.
Follow the steps
Step 1: Register as a Huawei Developer.
Step 2: Download Scan Flutter package and decompress it.
Step 3: Add dependencies pubspec.yaml. Change path according to your downloaded path.
{
"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"
}
Step 4: After adding the dependencies, click on Pub get.
Step 5: Navigate to any of the *.dart file and click on Get dependencies.
Step 6: Build Flutter sample Application.
Code:
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:huawei_scan/HmsScanLibrary.dart';
import 'item_list.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scan Kit Demo',
theme: ThemeData(
primarySwatch: Colors.red,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Scan Kit'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/backgrond.jpg"),
fit: BoxFit.cover,
)),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () async {
DefaultViewRequest request = new DefaultViewRequest(
scanType: HmsScanTypes.AllScanType);
ScanResponse response =
await HmsScanUtils.startDefaultView(request);
setState(() {
var resultScan = response.originalValue;
var codeFormatScan = response.scanType;
var resultTypeScan = response.scanTypeForm;
print("Result" +
resultTypeScan.toString() +
" " +
codeFormatScan.toString() +
" " +
resultScan);
Fluttertoast.showToast(
msg: "Result: "+ resultScan,
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0
);
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Result" +resultScan),
));
});
},
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
margin: EdgeInsets.all(10.0),
alignment: Alignment(0, 1),
padding: EdgeInsets.all(15.0),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25)),
child: Text(
'Default View',
style: new TextStyle(color: Colors.white),
),
),
),
InkWell(
onTap: () async {
CustomizedViewRequest request = new CustomizedViewRequest(scanType: HmsScanTypes.AllScanType);
await HmsCustomizedView.startCustomizedView(request);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
margin: EdgeInsets.all(10.0),
alignment: Alignment(0, 1),
padding: EdgeInsets.all(15.0),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25)),
child: Text(
'Customized View',
style: new TextStyle(color: Colors.white),
),
),
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProductList()),
);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
margin: EdgeInsets.all(10.0),
alignment: Alignment(0, 1),
padding: EdgeInsets.all(15.0),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25)),
child: Text(
'Generate QR code',
style: new TextStyle(color: Colors.white),
),
),
)
],
),
),
),
);
}
customizedView() async {
var responseList = [];
ScanResponse response =
await HmsCustomizedView.startCustomizedView(
CustomizedViewRequest(
scanType: HmsScanTypes.AllScanType,
continuouslyScan: false,
isFlashAvailable: true,
flashOnLightChange: false,
customizedCameraListener: (ScanResponse response) {
//pause();
setState(() {
responseList.add(response);
});
//resume();
},
customizedLifeCycleListener:
(CustomizedViewEvent lifecycleStatus) {
debugPrint("Customized View LifeCycle Listener: " +
lifecycleStatus.toString());
if (lifecycleStatus == CustomizedViewEvent.onStart) {
Future.delayed(const Duration(seconds: 5), () async {
// switchLightOnLightStatus();
});
}
},
));
setState(() {
var resultScan = response.originalValue;
var codeFormatScan = response.scanType;
var resultTypeScan = response.scanTypeForm;
print("Result" +
resultTypeScan.toString() +
" " +
codeFormatScan.toString() +
" " +
resultScan);
Fluttertoast.showToast(
msg: "Result: "+ resultScan,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
});
}
}
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0203436830890850132