Flutter掃描二維碼功能開發

今天用Flutter開發掃描二維碼功能，發現仍是有一些坑的，整理記錄一下采坑過程。

barcode_scan安裝

Android設置

1. Android相機權限許可設置 在AndroidManifest.xml 下添加權限許可和activity

   <!-- 權限許可 -->
   <uses-permission android:name="android.permission.CAMERA" />
   <!-- 添加掃描二維碼的activity -->
   <activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>
   複製代碼

2. 編輯android/build.gradle文件,添加以下代碼

   

   buildscript {
       ext.kotlin_version = '1.3.41'
       ...
       dependencies {
           ...
           classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
       }
   }
   ...
   複製代碼

3. 編輯android/app/build.gradle文件,添加以下代碼

   ...
   dependencies {
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
       ...
   }
   複製代碼

iOS設置

在ios/Runner/info.plist文件中添加相機權限設置

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>
複製代碼

安裝插件

在pubspec.yaml文件中添加插件

dependencies:
  ...
  barcode_scan: any
複製代碼

而後點擊右上角的Packages get按鈕進行安裝。

barcode_scan使用

由於我是用的Fish Redux框架，因此是在effect中調用，總體代碼以下:

import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/services.dart';

Effect<ScanState> buildEffect() {
  return combineEffects(<Object, Effect<ScanState>>{
    Lifecycle.initState: _onScan,
  });
}

void _onScan(Action action, Context<ScanState> ctx) async {
  try {
    String barcode = await BarcodeScanner.scan();
    // 回調掃描結果
    ctx.dispatch(ScanActionCreator.didScan(null, barcode));
  } on PlatformException catch (e) {
    if (e.code == BarcodeScanner.CameraAccessDenied) {
      // 回調錯誤信息
      ctx.dispatch(ScanActionCreator.didScan("The user did not grant the camera permission!", null));
    } else {
      // 回調錯誤信息
      ctx.dispatch(ScanActionCreator.didScan("Unknown error: $e", null));
    }
  } on FormatException {
    // 回調錯誤信息
    ctx.dispatch(ScanActionCreator.didScan("null (User returned using the back-button before scanning anything. Result)", null));
  } catch (e) {
    // 回調錯誤信息
    ctx.dispatch(ScanActionCreator.didScan("Unknown error: $e", null));
  }
}
複製代碼

ScanActionCreator的定義以下:

class ScanActionCreator {

  static Action didScan(String error, String code) {
    return Action(ScanAction.didScan, payload: {"error": error, "code": code});
  }
}
複製代碼

遇到的錯誤

1. 遇到下圖的問題是由於沒有添加權限設置，按照前面的方法設置就能夠了。

   

2. error: unexpected element <activity> found in <manifest> 錯誤緣由是設置Android權限的時候沒有吧activity放到application下面。

<application>
    ...
    <!-- 掃描二維碼 -->
    <activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>
</application>
<!-- 權限許可 -->
<uses-permission android:name="android.permission.CAMERA" />
複製代碼

1. 點擊掃描崩潰,報以下錯誤

android.content.ActivityNotFoundException: Unable to find explicit activity class {com.met.metchain2/com.apptreesoftware.barcodescan.BarcodeScannerActivity}; have you declared this activity in your AndroidManifest.xml?
複製代碼

解決辦法: 刪除android/.gradle文件夾，從新運行便可。

博客地址: www.ljcoder.com/15644824472…