今日要點
》前言
**》介紹 firebase_ml_vision 專案裡的 CameraPreviewScanner **
》程式架構研究

前言

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

我們把專案編譯成功也執行起來了，簡單了介紹了一下程式架構，還有 main.dart 裡的程式。今天來看 CameraPreviewScanner 的部份。

先試一下 CameraPreviewScanner

他一共有6個範例，預設是在 Detect Text 範例，

Detect Text 範例，這個目前只能辨識英文與數字，中文他不認得。

右上的選單有6個範例可以選擇。

如果選了 Detect Lable , 就會跟你說畫面上的東西可能是什麼

像這個程式認為是杯子。

程式架構研究

camera_preview_scanner.dart : Scaffold

主要的功能區塊。

先把 build 的程式細節簡化一下，

再來看一下 PopupMenuButton 的部份

上面這段的畫面呈現是這樣

buildImage 的部份，如果沒有相機鏡頭，就秀訊息，有相機鏡頭，那就用 Stack 把 相機鏡頭的畫面，跟辨識結果的畫面 Widget 疊起來。

  Widget _buildImage() {
    return Container(
      constraints: const BoxConstraints.expand(),
      child: _camera == null
          ? const Center(
              child: Text(
                'Initializing Camera...',
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 30.0,
                ),
              ),
            )
          : Stack(
              fit: StackFit.expand,
              children: <Widget>[
                CameraPreview(_camera),
                _buildResults(),
              ],
            ),
    );
  }

今天就先這樣吧。

好，第24天，寫完。

參考

firebase_ml_vision 0.9.7