今日要點
》介紹 flutterfire 專案
》下載並編譯 flutterfire firebase_ml_vision 專案
》程式架構研究

介紹 flutterfire 專案

今天要介紹的Github專案，FlutterFire 是一套 firebase 出品的 Flutter 套件，可讓 Flutter 應用使用Firebase 服務。。FirebaseExtended/flutterfire 有 2.9K 的星星。

那時候找到這個，其實是有個展示需求要是掃證件上的文字，因為有的證件上沒有條碼，如會員編號，然後直接拿到字串，結果就找到這個方案。

先看看他在 README.md 裡介紹的服務有那些。
AdMob (firebase_admob)
Analytics (firebase_analytics)
Authentication (firebase_auth)
Cloud Firestore (cloud_firestore)
Cloud Functions (cloud_functions)
Cloud Messaging (firebase_messaging)
Cloud Storage (firebase_storage)
Core (firebase_core)
Crashlytics (firebase_crashlytics)
Realtime Database (firebase_database)
Dynamic Links (firebase_dynamic_links)
In-App Messaging (firebase_in_app_messaging)
ML Custom (firebase_ml_custom)
ML Vision (firebase_ml_vision)
Performance Monitoring (firebase_performance)
Remote Config (firebase_remote_config)

幾乎都有了，有點厲害的專案，所以編譯起來介紹一下。這個專案蠻多可以研究。不過今天先介紹 ML Vision (firebase_ml_vision)。

下載並編譯 flutterfire firebase_ml_vision 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 flutterfire 專案囉。

% git clone https://github.com/FirebaseExtended/flutterfire.git

Cloning into 'flutterfire'...
remote: Enumerating objects: 3480, done.
remote: Counting objects: 100% (3480/3480), done.
remote: Compressing objects: 100% (1383/1383), done.
remote: Total 26398 (delta 2536), reused 2918 (delta 2061), pack-reused 22918
Receiving objects: 100% (26398/26398), 23.30 MiB | 4.47 MiB/s, done.
Resolving deltas: 100% (16152/16152), done.

firebase_ml_vision 專案目錄放在這裡：
flutterfire/packages/firebase_ml_vision/example/
所以我們先切換過去。

% cd flutterfire/packages/firebase_ml_vision/example/ 
% flutter pub get

Running "flutter pub get" in example...     3.9s

試 build 一下，

% flutter run -d all

嗯，iOS OK , android 也 OK.

不過因為要用鏡頭才能測，所以我還是要放到手機裡試，我手上有iPhone手機，那先試試 iPhone 囉，先設定一下 Xcode 裡的 Signing & Capabilities 就可以傳到手機上試了。

把設定設成正確的帳號資訊。

成功

好奇 ios 引用了那些套件進來，重新 pod install 一下

% cd ios
% pod install 

Analyzing dependencies
firebase_core: Using Firebase SDK version '6.26.0' defined in 'firebase_core'
Downloading dependencies
Installing Firebase (6.26.0)
Installing FirebaseAnalytics (6.6.0)
Installing FirebaseCore (6.7.2)
Installing FirebaseCoreDiagnostics (1.5.0)
Installing FirebaseCoreDiagnosticsInterop (1.2.0)
Installing FirebaseInstallations (1.3.0)
Installing FirebaseInstanceID (4.3.4)
Installing FirebaseMLCommon (0.20.1)
Installing FirebaseMLVision (0.20.1)
Installing FirebaseMLVisionBarcodeModel (0.20.0)
Installing FirebaseMLVisionFaceModel (0.20.0)
Installing FirebaseMLVisionLabelModel (0.20.0)
Installing FirebaseMLVisionTextModel (0.20.0)
Installing Flutter (1.0.0)
Installing GTMSessionFetcher (1.4.0)
Installing GoogleAPIClientForREST (1.4.3)
Installing GoogleAppMeasurement (6.6.0)
Installing GoogleDataTransport (7.2.0)
Installing GoogleToolboxForMac (2.2.2)
Installing GoogleUtilities (6.7.2)
Installing PromisesObjC (1.2.10)
Installing Protobuf (3.13.0)
Installing camera (0.0.1)
Installing e2e (0.0.1)
Installing firebase_core (0.5.0)
Installing firebase_core_web (0.1.0)
Installing firebase_ml_vision (0.1.1)
Installing flutter_plugin_android_lifecycle (0.0.1)
Installing image_picker (0.0.1)
Installing nanopb (1.30905.0)
Installing path_provider (0.0.1)
Installing path_provider_linux (0.0.1)
Installing path_provider_macos (0.0.1)
Installing path_provider_windows (0.0.1)
Generating Pods project
Integrating client project
Pod installation complete! There are 16 dependencies from the Podfile and 34 total pods installed.

程式架構研究

main.dart : MaterialApp , Scaffold

main.dart : build 部份。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example List'),
      ),
      body: ListView.builder(
        itemCount: _exampleWidgetNames.length,
        itemBuilder: (BuildContext context, int index) {
          final String widgetName = _exampleWidgetNames[index];

          return Container(
            decoration: const BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.grey)),
            ),
            child: ListTile(
              title: Text(widgetName),
              onTap: () => Navigator.pushNamed(context, '/$widgetName'),
            ),
          );
        },
      ),
    );
  }

第一個畫面很簡單，就是一個 ListView, 並且設定點擊的時候要執行那一個 widgetName. 他定義在 _exampleWidgetNames

  static final List<String> _exampleWidgetNames = <String>[
    '$PictureScanner',
    '$CameraPreviewScanner',
    '$MaterialBarcodeScanner',
  ];

對應剛剛的畫面可以看到主要是三個 dart 檔

picture_scanner.dart
camera_preview_scanner.dart
material_barcode_scanner.dart

其他是一些工具檔
colors.dart
detector_painters.dart
scanner_utils.dart

今天就先這樣吧。

好，第23天，寫完。

參考

firebase_ml_vision 0.9.7