前沿
从事Flutter开发以来，一直都是运用已有的插件，没有自己开发过。最近同事推荐让我运用华为的扫码SDK（hms_scan_kit），正好借此机会来开发一个Flutter的原生插件。算是对最近的插件学习做一个简单的总结。
作用图
咱们先看一下完结的扫码作用：点击LoadScanKit按钮调起插件的扫码功用，扫码成功后在界面显现扫码成果。
相关知识点
1. Flutter Packages
经过运用 package（的形式）可以创立易于同享的模块化代码。一个最根本的 package 由以下内容构成：
- pubspec.yaml 文件
用于定义 package 名称、版别号、作者等其他信息的元数据文件。
- lib 目录
包括同享代码的 lib 目录，其间至少包括一个 <package-name>.dart 文件。
2. Package类别
Package包分为二种：
- 纯Dart库(Dart packages)
- 只用Dart编写的传统package，比方 path。
- 原生插件(Plugin packages)
- 运用Dart编写的，按需运用Java或 Kotlin、Objective-C或Swift 分别在Android或iOS渠道完结的package。
3. 原生插件开发过程
- 创立package
- 想要创立原生插件 package，请运用带有 –template=plugin 标志的 flutter create 指令
flutter create --org com.example --template=plugin --platforms=android,ios -a kotlin hello
-
完结package a. 定义 package API（.dart） b. 增加 Android/iOS 渠道代码（.kt/.swift） C. 相关 API 和渠道代码
-
指定插件支撑的渠道，比方hms_scan插件就如下定义：
name: flutter_hms_scan
description: A new Flutter project.
version: 0.0.1
homepage:
environment:
sdk: ">=2.15.1 <3.0.0"
flutter: ">=2.5.0"
flutter:
plugin:
platforms:
android:
package: com.fitem.flutter_hms_scan
pluginClass: HmsScanPlugin
ios:
pluginClass: HmsScanPlugin
补白：如果运用IDE（比方Android Studio）直接在创立Flutter项目处选择Plugin类型即可，IDE会创立插件模板并完结获取渠道体系版别的example，无需上面的过程
- Dart对应原生类型：
| Dart | kotlin | Swift |
|---|---|---|
| null | null | nil |
| bool | Boolean | NSNumber(value: Bool) |
| int | Int | NSNumber(value: Int32) |
| int | Long | NSNumber(value: Int) |
| double | Double | NSNumber(value: Double) |
| String | String | String |
| Uint8List | ByteArray | FlutterStandardTypedData(bytes: Data) |
| Int32List | IntArray | FlutterStandardTypedData(int32: Data) |
| Int64List | LongArray | FlutterStandardTypedData(int64: Data) |
| Float32List | FloatArray | FlutterStandardTypedData(float32: Data) |
| Float64List | DoubleArray | FlutterStandardTypedData(float64: Data) |
| List | List | Array |
| Map | HashMap | Dictionary |
- Flutter的plugin通讯流程如下：
HmsScan插件的完结
前面说了这么多，总算进入正题，下面咱们开始HmsScan插件的开发吧。
1. 定义 package API：
class FlutterHmsScan {
// 创立插件
static const MethodChannel _channel = MethodChannel('hms_scan');
// 定义调用办法
static Future<ScanBean> loadScanKit() async {
return await _channel
.invokeMethod("loadScanKit")
.then((value) => scanBeanFromJson(json.encode(value)));
}
}
2. Android代码完结：
a. 运用IDE翻开Android目录，根据官方SDK导入库
// scankitSDK
implementation 'com.huawei.hms:scanplus:2.4.0.301'
// 需求在repositories中导入url
maven {url 'https://developer.huawei.com/repo/'}
b. 承继FlutterPlugin类，接入Flutter管道。因为sdk用到权限请求和onActivityResult的回调，因此咱们需求承继ActivityAware对Activity增加监听。其间registerWith()办法是为了适配老版别Flutter的兼容。
class HmsScanPlugin : FlutterPlugin, ActivityAware {
/// The MethodChannel that will the communication between Flutter and native Android
///
/// This local reference serves to register the plugin with the Flutter Engine and unregister it
/// when the Flutter Engine is detached from the Activity
private lateinit var mScanLauncher: ScanLauncher
private lateinit var mHandler: MethodCallHandlerImpl
/**
* 老版别Flutter兼容
*/
fun registerWith(registrar: Registrar) {
mScanLauncher = ScanLauncher(registrar.context(), registrar.activity())
mHandler = MethodCallHandlerImpl(mScanLauncher)
mHandler.startService(registrar.messenger())
registrar.addActivityResultListener(mHandler)
registrar.addRequestPermissionsResultListener(mHandler)
}
override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
mScanLauncher = ScanLauncher(flutterPluginBinding.applicationContext, null)
mHandler = MethodCallHandlerImpl(mScanLauncher)
mHandler.startService(flutterPluginBinding.binaryMessenger)
}
override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
mHandler.stopService()
}
override fun onAttachedToActivity(binding: ActivityPluginBinding) {
mScanLauncher.activity = binding.activity
binding.addActivityResultListener(mHandler)
binding.addRequestPermissionsResultListener(mHandler)
}
override fun onDetachedFromActivity() {
mScanLauncher.activity = null
}
override fun onDetachedFromActivityForConfigChanges() {
onDetachedFromActivity()
}
override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
onAttachedToActivity(binding)
}
}
c. 考虑到HmsScanPlugin职责过多，这儿运用MethodCallHandlerImpl进行分离解耦，专门处理Flutter管道的通讯。
/**
* 插件办法监听
* Created by Fitem on 2022/3/2.
*/
class MethodCallHandlerImpl(var scanLauncher: ScanLauncher) : MethodChannel.MethodCallHandler,
MethodCallHandlerListener, PluginRegistry.ActivityResultListener,
PluginRegistry.RequestPermissionsResultListener {
private lateinit var channel: MethodChannel
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
when (call.method) {
"getPlatformVersion" -> {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
}
"loadScanKit" -> {
scanLauncher.loadScanKit(call, result)
}
else -> {
result.notImplemented()
}
}
}
override fun startService(binaryMessenger: BinaryMessenger) {
channel = MethodChannel(binaryMessenger, "hms_scan")
channel.setMethodCallHandler(this)
}
override fun stopService() {
channel.setMethodCallHandler(null)
}
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?): Boolean {
if (resultCode != Activity.RESULT_OK || data == null) {
return false
}
return scanLauncher.onActivityResult(requestCode, resultCode, data)
}
override fun onRequestPermissionsResult(
requestCode: Int,
permissions: Array<out String>?,
grantResults: IntArray?
): Boolean {
if (permissions == null || grantResults == null) {
return false
}
return scanLauncher.onRequestPermissionResult(requestCode, permissions, grantResults)
}
}
// 管道通讯生命周期的绑定
interface MethodCallHandlerListener {
fun startService(binaryMessenger: BinaryMessenger)
fun stopService()
}
d. 最终经过ScanLauncher来专门处理扫码功用的相关完结
class ScanLauncher(var applicationContext: Context, var activity: Activity?) {
companion object {
const val CAMERA_REQ_CODE = 111
const val DEFINED_CODE = 222
const val BITMAP_CODE = 333
const val MULTIPROCESSOR_SYN_CODE = 444
const val MULTIPROCESSOR_ASYN_CODE = 555
const val GENERATE_CODE = 666
const val DECODE = 1
const val GENERATE = 2
const val REQUEST_CODE_SCAN_ONE = 0X01
const val REQUEST_CODE_DEFINE = 0X0111
const val REQUEST_CODE_SCAN_MULTI = 0X011
const val DECODE_MODE = "decode_mode"
const val RESULT = "SCAN_RESULT"
const val SCAN_STATUS = "scanStatus"
const val CODE_FORMAT = "codeFormat"
const val RESULT_TYPE = "resultType"
const val CODE_RESULT = "codeResult"
}
private var result: MethodChannel.Result? = null
/**
* 扫码
*/
fun loadScanKit(call: MethodCall, result: MethodChannel.Result) {
this.result = result
requestPermission(CAMERA_REQ_CODE, DECODE)
}
/**
* Apply for permissions.
*/
private fun requestPermission(requestCode: Int, mode: Int) {
if (activity == null) {
result?.success(mapOf(SCAN_STATUS to false))
return
}
if (mode == DECODE) {
decodePermission(requestCode)
} else if (mode == GENERATE) {
generatePermission(requestCode)
}
}
/**
* Apply for permissions.
*/
private fun decodePermission(requestCode: Int) {
ActivityCompat.requestPermissions(
activity!!,
arrayOf(Manifest.permission.CAMERA, Manifest.permission.READ_EXTERNAL_STORAGE),
requestCode
)
}
/**
* Apply for permissions.
*/
private fun generatePermission(requestCode: Int) {
ActivityCompat.requestPermissions(
activity!!, arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE),
requestCode
)
}
fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent): Boolean {
//Default View
if (requestCode == REQUEST_CODE_SCAN_ONE) {
val obj: HmsScan? = data.getParcelableExtra(ScanUtil.RESULT)
if (obj != null) {
result?.success(
mapOf(
SCAN_STATUS to true,
CODE_FORMAT to getCodeFormat(obj.scanType),
RESULT_TYPE to getResultType(obj),
CODE_RESULT to obj.originalValue
)
)
return true
}
//MultiProcessor & Bitmap
}
return false
}
fun onRequestPermissionResult(
requestCode: Int,
permissions: Array<out String>,
grantResults: IntArray
): Boolean {
if (grantResults.size < 2 || grantResults[0] != PackageManager.PERMISSION_GRANTED || grantResults[1] != PackageManager.PERMISSION_GRANTED) {
return false
}
//Default View Mode
if (requestCode == CAMERA_REQ_CODE) {
ScanUtil.startScan(
activity,
REQUEST_CODE_SCAN_ONE,
HmsScanAnalyzerOptions.Creator().create()
)
return true
}
return false
}
/**
* 获取CodeFormat
*/
private fun getCodeFormat(codeFormat: Int): String {
return when (codeFormat) {
HmsScan.QRCODE_SCAN_TYPE -> "QR code"
HmsScan.AZTEC_SCAN_TYPE -> "AZTEC code"
HmsScan.DATAMATRIX_SCAN_TYPE -> "DATAMATRIX code"
HmsScan.PDF417_SCAN_TYPE -> "PDF417 code"
HmsScan.CODE93_SCAN_TYPE -> "CODE93"
HmsScan.CODE39_SCAN_TYPE -> "CODE39"
HmsScan.CODE128_SCAN_TYPE -> "CODE128"
HmsScan.EAN13_SCAN_TYPE -> "EAN13 code"
HmsScan.EAN8_SCAN_TYPE -> "EAN8 code"
HmsScan.ITF14_SCAN_TYPE -> "ITF14 code"
HmsScan.UPCCODE_A_SCAN_TYPE -> "UPCCODE_A"
HmsScan.UPCCODE_E_SCAN_TYPE -> "UPCCODE_E"
HmsScan.CODABAR_SCAN_TYPE -> "CODABAR"
else -> "OTHER"
}
}
/**
* 获取ResultType
*/
private fun getResultType(hmsScan: HmsScan): String {
return when (hmsScan.scanType) {
HmsScan.QRCODE_SCAN_TYPE -> when (hmsScan.scanTypeForm) {
HmsScan.QRCODE_SCAN_TYPE -> "Text"
HmsScan.EVENT_INFO_FORM -> "Event"
HmsScan.CONTACT_DETAIL_FORM -> "Contact"
HmsScan.DRIVER_INFO_FORM -> "License"
HmsScan.EMAIL_CONTENT_FORM -> "Email"
HmsScan.LOCATION_COORDINATE_FORM -> "Location"
HmsScan.TEL_PHONE_NUMBER_FORM -> "Tel"
HmsScan.SMS_FORM -> "SMS"
HmsScan.WIFI_CONNECT_INFO_FORM -> "Wi-Fi"
HmsScan.URL_FORM -> "WebSite"
HmsScan.URL_FORM -> "WebSite"
else -> "Text"
}
HmsScan.EAN13_SCAN_TYPE -> when (hmsScan.scanTypeForm) {
HmsScan.ISBN_NUMBER_FORM -> "ISBN"
HmsScan.ARTICLE_NUMBER_FORM -> "Product"
else -> "Text"
}
HmsScan.EAN8_SCAN_TYPE,
HmsScan.UPCCODE_A_SCAN_TYPE,
HmsScan.UPCCODE_E_SCAN_TYPE -> when (hmsScan.scanTypeForm) {
HmsScan.ARTICLE_NUMBER_FORM -> "Product"
else -> "Text"
}
else -> "Text"
}
}
}
最终在AndroidManifest.xml中增加需求的权限：
<!--相机权限-->
<uses-permission android:name="android.permission.CAMERA" />
<!--文件读取权限-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
3. ios部分的完结
ios原本也是打算运用hms的，可是官方居然2年没有更新了，而且不支撑bitcode版别、不支撑cocopod，demo也无法正常运转。经过一番测验后，决定抛弃运用该库，换成了MTBBarcodeScanner库。（ios新人一个，如果有精通IOS的同学们欢迎指导！）
a. 经过SwiftHmsScanPlugin创立Flutter管道
public class SwiftHmsScanPlugin: NSObject, FlutterPlugin, BarcodeScannerViewControllerDelegate {
private var result: FlutterResult?
private var hostViewController: UIViewController?
public static func register(with registrar: FlutterPluginRegistrar) {
let channel = FlutterMethodChannel(name: "hms_scan", binaryMessenger: registrar.messenger())
let instance = SwiftHmsScanPlugin()
registrar.addMethodCallDelegate(instance, channel: channel)
}
public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
self.result = result
if ("loadScanKit" == call.method) {
loadScanKit()
} else {
result("iOS " + UIDevice.current.systemVersion)
}
}
public func loadScanKit() {
if let rootVC = UIApplication.shared.keyWindow?.rootViewController {
hostViewController = topViewController(base:rootVC)
} else if let window = UIApplication.shared.delegate?.window,let rootVC = window?.rootViewController {
hostViewController = topViewController(base:rootVC)
}
let scannerViewController = BarcodeScannerViewController()
let navigationController = UINavigationController(rootViewController: scannerViewController)
if #available(iOS 13.0, *) {
navigationController.modalPresentationStyle = .fullScreen
}
scannerViewController.delegate = self
hostViewController?.present(navigationController, animated: false)
}
private func topViewController(base: UIViewController?) -> UIViewController? {
if let nav = base as? UINavigationController {
return topViewController(base: nav.visibleViewController)
} else if let tab = base as? UITabBarController, let selected = tab.selectedViewController {
return topViewController(base: selected)
} else if let presented = base?.presentedViewController {
return topViewController(base: presented)
}
return base
}
func didScanBarcodeWithResult(_ controller: BarcodeScannerViewController?, scanResult: ScanResult) {
result?(["codeResult":scanResult.rawContent, "scanStatus" : String(true), "resultType": String(scanResult.format.rawValue)])
}
func didFailWithErrorCode(_ controller: BarcodeScannerViewController?, errorCode: String) {
result?(["scanStatus" : String(false)])
}
}
b. BarcodeScannerViewController完结扫码功用
class BarcodeScannerViewController: UIViewController {
private var previewView: UIView?
private var scanRect: ScannerOverlay?
private var scanner: MTBBarcodeScanner?
private let formatMap = [
BarcodeFormat.aztec : AVMetadataObject.ObjectType.aztec,
BarcodeFormat.code39 : AVMetadataObject.ObjectType.code39,
BarcodeFormat.code93 : AVMetadataObject.ObjectType.code93,
BarcodeFormat.code128 : AVMetadataObject.ObjectType.code128,
BarcodeFormat.dataMatrix : AVMetadataObject.ObjectType.dataMatrix,
BarcodeFormat.ean8 : AVMetadataObject.ObjectType.ean8,
BarcodeFormat.ean13 : AVMetadataObject.ObjectType.ean13,
BarcodeFormat.interleaved2Of5 : AVMetadataObject.ObjectType.interleaved2of5,
BarcodeFormat.pdf417 : AVMetadataObject.ObjectType.pdf417,
BarcodeFormat.qr : AVMetadataObject.ObjectType.qr,
BarcodeFormat.upce : AVMetadataObject.ObjectType.upce,
]
var delegate: BarcodeScannerViewControllerDelegate?
private var device: AVCaptureDevice? {
return AVCaptureDevice.default(for: .video)
}
private var isFlashOn: Bool {
return device != nil && (device?.flashMode == AVCaptureDevice.FlashMode.on || device?.torchMode == .on)
}
private var hasTorch: Bool {
return device?.hasTorch ?? false
}
override func viewDidLoad() {
super.viewDidLoad()
UIDevice.current.endGeneratingDeviceOrientationNotifications()
#if targetEnvironment(simulator)
view.backgroundColor = .lightGray
#endif
previewView = UIView(frame: view.bounds)
if let previewView = previewView {
previewView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(previewView)
}
setupScanRect(view.bounds)
scanner = MTBBarcodeScanner(previewView: previewView)
navigationItem.leftBarButtonItem = UIBarButtonItem(title: "cancel",
style: .plain,
target: self,
action: #selector(cancel)
)
updateToggleFlashButton()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
if scanner!.isScanning() {
scanner!.stopScanning()
}
UIDevice.current.endGeneratingDeviceOrientationNotifications()
scanRect?.startAnimating()
MTBBarcodeScanner.requestCameraPermission(success: { success in
if success {
self.startScan()
} else {
#if !targetEnvironment(simulator)
self.errorResult(errorCode: "PERMISSION_NOT_GRANTED")
#endif
}
})
}
override func viewWillDisappear(_ animated: Bool) {
scanner?.stopScanning()
scanRect?.stopAnimating()
UIDevice.current.beginGeneratingDeviceOrientationNotifications()
if isFlashOn {
setFlashState(false)
}
super.viewWillDisappear(animated)
}
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
setupScanRect(CGRect(origin: CGPoint(x: 0, y:0),
size: size
))
}
private func setupScanRect(_ bounds: CGRect) {
if scanRect != nil {
scanRect?.stopAnimating()
scanRect?.removeFromSuperview()
}
scanRect = ScannerOverlay(frame: bounds)
if let scanRect = scanRect {
scanRect.translatesAutoresizingMaskIntoConstraints = false
scanRect.backgroundColor = UIColor.clear
view.addSubview(scanRect)
scanRect.startAnimating()
}
}
private func startScan() {
do {
try scanner!.startScanning(with: cameraFromConfig, resultBlock: { codes in
if let code = codes?.first {
let codeType = self.formatMap.first(where: { $0.value == code.type });
let scanResult = ScanResult.with {
$0.type = .barcode
$0.rawContent = code.stringValue ?? ""
$0.format = codeType?.key ?? .unknown
$0.formatNote = codeType == nil ? code.type.rawValue : ""
}
self.scanner!.stopScanning()
self.scanResult(scanResult)
}
})
} catch {
self.scanResult(ScanResult.with {
$0.type = .error
$0.rawContent = "\(error)"
$0.format = .unknown
})
}
}
@objc private func cancel() {
scanResult( ScanResult.with {
$0.type = .cancelled
$0.format = .unknown
});
}
@objc private func onToggleFlash() {
setFlashState(!isFlashOn)
}
private func updateToggleFlashButton() {
if !hasTorch {
return
}
let buttonText = isFlashOn ? "flash_off" : "flash_on"
navigationItem.rightBarButtonItem = UIBarButtonItem(title: buttonText,
style: .plain,
target: self,
action: #selector(onToggleFlash)
)
}
private func setFlashState(_ on: Bool) {
if let device = device {
guard device.hasFlash && device.hasTorch else {
return
}
do {
try device.lockForConfiguration()
} catch {
return
}
device.flashMode = on ? .on : .off
device.torchMode = on ? .on : .off
device.unlockForConfiguration()
updateToggleFlashButton()
}
}
private func errorResult(errorCode: String){
delegate?.didFailWithErrorCode(self, errorCode: errorCode)
dismiss(animated: false)
}
private func scanResult(_ scanResult: ScanResult){
self.delegate?.didScanBarcodeWithResult(self, scanResult: scanResult)
dismiss(animated: false)
}
private var cameraFromConfig: MTBCamera {
return .back
}
}
c. 最终需求在example的ios目录Info.plist文件中增加相机权限：
// example/ios/Runner/Info.plist
<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>
至此，一个简单的应用于Android、iOS的plugin插件已完结。
4. 需求注意的点
- 运用Android Studio右键选择Flutter即可经过Android Studio和Xcode翻开项目，如图：
- Android目录翻开后，若看不到插件module，可以选择Project Files形式下检查，如图：
- ios目录翻开前，需求进入example目录输入指令 flutter build ios，待编译完结后再经过Xcode翻开。
总结
Plugin原生插件其实就是基于Flutter供给的管道进行通讯，和原生开发的运用并无太大差异。但需求咱们对原生代码的调用有一个根本的了解，然后引进其他原生开发库进行调用。最终附上项目地址：flutter_hms_scan
