iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
0
Mobile Development

「Google Flutter」學習筆記系列 第 24

【Day 24】flutterfire - firebase_ml_vision 辨識專案-2-CameraPreviewScanner

今日要點
》前言
**》介紹 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


上一篇
【Day 23】flutterfire - firebase_ml_vision 辨識專案
下一篇
【Day 25】lottie-flutter - 前端動畫的專案
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言