1. 程式人生 > 程式設計 >詳解Flutter掃碼識別二維碼內容

詳解Flutter掃碼識別二維碼內容

前面一篇寫了生成二維碼圖片,這篇來寫使用相機掃描識別二維碼

識別二維碼需要用到外掛barcode_scan

首先在pubspec.yaml檔案中新增以下依賴,新增依賴後在pubspec.yaml執行flutter packages get或 使用IDE更新軟體包。

dependencies:
 ...
 barcode_scan: ^1.0.0

Android配置

在使用它之前需要先配置 android\app\src\main\AndroidManifest.xml

在該檔案中新增新增app獲取相機許可權及BarcodeScanner activity

<!--獲取相機許可權-->
<uses-permission android:name="android.permission.CAMERA" />
<activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>

如下圖所示

詳解Flutter掃碼識別二維碼內容

編輯專案級build.gradle檔案

buildscript {
  ext.kotlin_version = '1.2.31'
  ...
  dependencies {
    ...
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  }
}
...

如圖所示

詳解Flutter掃碼識別二維碼內容

以及編輯應用級build.gradle檔案

apply plugin: 'kotlin-android'
...
dependencies {
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
  ...
}

如圖所示

詳解Flutter掃碼識別二維碼內容

注意 apply plugin: 'kotlin-android' 需要放在 apply plugin: 'com.android.application' 之後

IOS配置

在 Info.plist 中新增一下內容

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

掃碼實現

完成以上步驟之後在需要觸發掃碼的頁面引用barcode_scan

import 'package:barcode_scan/barcode_scan.dart';

然後寫上一個呼叫掃碼的方法

// 掃描二維碼
Future scan() async {
 try {
  // 此處為掃碼結果,barcode為二維碼的內容
  String barcode = await BarcodeScanner.scan();
  print('掃碼結果: '+barcode);
 } on PlatformException catch (e) {
  if (e.code == BarcodeScanner.CameraAccessDenied) {
   // 未授予APP相機許可權
   print('未授予APP相機許可權');
  } else {
   // 掃碼錯誤
   print('掃碼錯誤: $e');
  }
 } on FormatException{
  // 進入掃碼頁面後未掃碼就返回
  print('進入掃碼頁面後未掃碼就返回');
 } catch (e) {
  // 掃碼錯誤
  print('掃碼錯誤: $e');
 }
}

在使用時觸發scan()方法即可,效果如下

詳解Flutter掃碼識別二維碼內容

預設的右上角開啟閃光燈的文字為英文,如果需要修改可以到Flutter目錄下修改以下相應檔案

Andriod檔案

flutter\.pub-cache\hosted\pub.flutter-io.cn\barcode_scan-1.0.0\android\src\main\kotlin\com\apptreesoftware\barcodescan\BarcodeScannerActivity.kt
flutter\.pub-cache\hosted\pub.flutter-io.cn\barcode_scan-1.0.0\android\src\main\kotlin\com\apptreesoftware\barcodescan\BarcodeScannerActivity.kt

如圖

詳解Flutter掃碼識別二維碼內容

IOS檔案

flutter\.pub-cache\hosted\pub.flutter-io.cn\barcode_scan-1.0.0\ios\Classes\BarcodeScannerViewController.m

如圖

詳解Flutter掃碼識別二維碼內容

注:該外掛也可以用來掃描條形碼

到此這篇關於Flutter掃碼識別二維碼內容的文章就介紹到這了,更多相關Flutter掃碼二維碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!