如何從零開始實施Flutter條碼掃描器

使用者7705881532650發表於2021-05-23

大約兩年前,我寫了一篇文章,分享瞭如何用Dynamsoft Barcode Reader一步步建立一個Flutter條碼外掛。那時候,Flutter還在開發中,只支援Android和iOS。如今,谷歌已經發布了Flutter 2,它允許開發者從一個程式碼庫中為移動、網路和桌面構建應用程式。如果你想構建跨平臺的應用程式,那麼從現在開始,值得在Flutter上投入很多精力。由於新的Flutter與舊的Flutter不相容,我決定重構Flutter條碼外掛的API,並新增一個新的方法來支援實時的視訊流條碼掃描。

Flutter條碼SDK外掛

在下面的段落中,我將演示如何開發一個支援從影像檔案和影像緩衝區讀取條形碼的Flutter條形碼外掛,以及如何將該外掛釋出到pub.dev。

使用Dynamsoft條碼閱讀器開發Flutter條碼SDK外掛

我目前的計劃是使該外掛適用於Android。因此,我建立瞭如下的外掛包。

flutter create --org com.dynamsoft --template=plugin --platforms=android -a java flutter_barcode_sdk
複製程式碼

為了在外掛專案中新增其他平臺的程式碼,如iOS,我可以執行。

flutter create --template=plugin --platforms=ios .
複製程式碼

外掛的API是在lib/flutter_barcode_sdk.dart 檔案中定義的,它是Dart程式碼和平臺特定程式碼之間的橋樑。一個android/src/main/java/com/dynamsoft/flutter_barcode_sdk/FlutterBarcodeSdkPlugin.java 檔案被生成,作為Android的入口點。

Dart程式碼

讓我們開始使用lib/flutter_barcode_sdk.dart

第一步是定義一個BarcodeResult 類,它包含條形碼格式、結果和座標點,用於反序列化從平臺特定程式碼返回的JSON資料。

為圖片和視訊流場景分別建立方法decodeFile()decodeImageBuffer()

_convertResults() 函式用於將List<Map<dynamic, dynamic>> 型別轉換為<List<BarcodeResult>> 型別。

Java程式碼

當呼叫Flutter API時,將觸發AndroidonMethodCall() 函式。

以下是特定平臺程式碼的基本步驟。

  1. 從Dart框架中提取引數。
  2. 處理影像資料。
  3. 返回結果。

decodeImageBuffer 方法是為相機流設計的。為了避免阻塞主執行緒,我使用SingleThreadExectuor ,在一個工作執行緒中處理CPU密集型工作。

釋出 Flutter Barcode SDK 外掛到 Pub.dev

在釋出外掛之前,你最好通過執行命令來分析。

flutter pub publish --dry-run
複製程式碼

如果沒有錯誤,您可以將包釋出到pub.dev。

flutter pub publish
複製程式碼

我已經成功釋出了Flutter條碼SDK到pub.dev/packages/fl…

外掛完成後,是時候用幾行Dart程式碼建立一個條碼掃描器應用了。

首先,我將Flutter相機外掛和flutter_barcode_sdk新增到pubspec.yaml 檔案中。

然後,在main.dart 中初始化相機和條碼閱讀器物件。

該應用程式由一個相機檢視、一個文字小部件和兩個按鈕小部件組成。

videoScan() 函式中,我呼叫startImageStream()來持續獲得最新的視訊幀並呼叫條碼解碼API。

pictureScan() 函式從影像中讀取條形碼,並在圖片螢幕上顯示影像和結果。

最後,我可以建立並執行該應用程式。

flutter run
複製程式碼

對Raspberry Pi包裝盒上的一維條碼和二維碼進行識別測試。

視訊條碼掃描

flutter barcode scanner

圖片條碼掃描

image.png

前提條件

iOS, Web, 和Windows。

原始碼

github.com/yushulx/flu…

相關文章