Skip to content

Flutter 快速入門指南

快速入門 Flutter SDK 最簡單的方法是下載並試用我們的 範例程式碼。此外,您還可以按照本快速入門指南,快速建立您的首個 Flutter 健康測評應用程式。

完成本指南後,我們強烈建議您遵循我們的 軟體開發指南,以確保 Vitals™ SDK 產生的健康測評結果準確可靠。

SDK Installation

請按照 下載 頁面中的說明安裝 Flutter SDK 並將其整合到您的專案中。

設定相機

整合 Vitals™ 健康測評(VHA) 中所述,第一步是設定相機。首先,建立一個新專案並按照以下說明操作。

相機權限

在開發 iOS 或 Android 應用程式時,您需要在 Info.plist 檔案中(iOS 系統)和 AndroidManifest.xml 檔案中(Android 系統)指定以下內容,以允許應用程式使用相機:

xml
<key>NSCameraUsageDescription</key>
<string>Use for measuring vital signs</string>
xml
<uses-permission android:name="android.permission.CAMERA" />

TIP 提示

Info.plist 中,字串 "Use for measuring vital signs" 是相機用途的範例描述。您應該根據應用的用途指定您自己的描述。

Vital Sign Camera

Vital Sign Camera 中所述,在 Vitals™ SDK 中,我們提供了一個名為 VitalSignCamera 的特製相機組件。要設定它,請在 App.tsx 檔案中宣告 VitalSignCamera 元素。例如:

dart
import 'package:flutter/material.dart';
import 'package:vital_sign_camera/vital_sign_camera.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

/* Vitals™ 雲端服務配置 */
final VitalSignCameraConfig config = VitalSignCameraConfig(
  apiKey: '__YOUR_API_KEY__',
);

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: VitalSignCamera(
          isActive: true,
          config: config,
        )
      ),
    );
  }
}

您將看到一個關於缺少 userInfo 參數的錯誤。不用擔心,我們將在下一節中修復這個問題。

TIP 提示

在上述範例中,字串 __YOUR_API_KEY__ 應替換為您自己的 API 金鑰。請聯絡我們以取得您的 API 金鑰,它是存取 Vitals™ 雲端服務的憑證。

有關系統和相機設定的更多詳細信息,請參閱 設定相機

獲取用戶健康檔案

正如 整合 Vitals™ 健康測評(VHA) 中所述,我們必須收集用戶的健康檔案和病史數據,才能獲得個人化的健康測評結果並提高測評的準確性。

首先,使用您收集到的使用者資訊建立一個 UserInfo 物件。

dart
final UserInfo userInfo = UserInfo(
  age: 30,
  gender: Gender.male,
  userId: '__YOUR_USER_ID__',
);

您可以將用戶健康檔案提供給 VitalSignCamera 元件中的 userInfo 屬性。

dart
VitalSignCamera(
  isActive: true,
  userInfo: userInfo,
  config: config,
)

運行應用程式,您現在應該能夠看到相機預覽。

TIP 提示

在上面的範例中,字串__YOUR_USER_ID__應替換為您自己的使用者 ID。請聯絡我們以取得您的使用者 ID,該 ID 指定了 Vitals™ 雲端服務的訂閱方案。掃描所獲得的生命體徵會因訂閱方案而異,每個方案都提供一組獨特的生命體徵。

更多詳細信息,請參閱 獲取用戶健康檔案 頁面。

掃描生命體徵

要開始掃描,您只需呼叫 VitalSignCameraController 元件的 startScanning() API 即可。

首先,建立一個類型為 VitalSignCameraController 的屬性:

dart
class _MainAppState extends State<MainApp> {
  late final VitalSignCameraController _vitalSignCameraController;
  // ...
}

然後建立一個名為 onVitalSignCameraCreated 的函式來初始化 _vitalSignCameraController 屬性:

dart
void _onVitalSignCameraCreated(VitalSignCameraController controller) {
  _vitalSignCameraController = controller;
}

_onVitalSignCameraCreated 函數指定給 VitalSignCameraonCreated 參數:

dart
VitalSignCamera(
  onCreated: _onVitalSignCameraCreated,
  // ...
)

新增一個開始按鈕,並呼叫 startScanning() API,例如:

dart
ElevatedButton(
  onPressed: () {
    setState(() {
      _vitalSignCameraController.startScanning();
    });
  },
  child: const Text('開始掃描'),
)

呼叫 API 後,元件將開始透過相機掃描人臉,持續時間為 30 秒。掃描成功後,將傳回生命體徵訊息。您可以透過 onVideoFrameProcessed 回呼函數記錄掃描進度並觀察任何錯誤。此回調函數以每秒 30Hz 的頻率(此頻率取決於相機的幀率)傳回處理結果。

dart
VitalSignCamera(
  // ...
  onVideoFrameProcessed: _onVideoFrameProcessed,
),

定義 _onVideoFrameProcessed 函數來列印掃描進度:

dart
void _onVideoFrameProcessed(VideoFrameProcessedEvent event) {
  /* 如果掃描正在進行,則列印掃描階段和剩餘秒數。 */
  if (event.healthResult?.stage != GetHealthStage.idle) {
    print('掃描階段=${event.healthResult?.stage}, 剩餘秒數=${event.healthResult?.remainingTime}');
  }
  /* 若有錯誤則列印 */
  if (event.healthResult?.error != null) {
    print('錯誤=${event.healthResult?.error}');
  }
}

運行應用程式,將你的臉部置於相機預覽的中央,點擊“開始掃描”按鈕。將你的臉部移出相機預覽範圍,模擬「人臉遺失」錯誤。你應該在Logcat中看到類似這樣的內容:

flutter: 掃描階段=GetHealthStage.collectingData, 剩餘秒數=22.315261960029602
flutter: 掃描階段=GetHealthStage.collectingData, 剩餘秒數=22.282362937927246
flutter: 錯誤=face lost
flutter: 錯誤=face lost

有關處理掃描過程的更多詳細信息,請參閱 掃描生命體徵 頁面。

取得並展示健康測評結果

VitalSignCamera 組件會透過 onVideoFrameProcessed 回呼函數傳回健康測評結果。在下面的範例程式碼中,它會檢查心率是否已準備好,並在準備好後將其顯示在控制台中。

dart
/* 更新了 onVideoFrameProcessed 回呼函數 */
void _onVideoFrameProcessed(VideoFrameProcessedEvent event) {
  // ...

  /* 取得心率結果 */
  if (event.healthResult?.health != null) {
    print('心率=${event.healthResult?.health?.vitalSigns.heartRate}');
  }
}

運行應用程式並進行掃描,30秒後,您將能夠看到以下心率結果:

I/flutter (14005): 掃描階段=GetHealthStage.analyzingData, 剩餘秒數=0.06799983978271484
I/flutter (14005): 掃描階段=GetHealthStage.analyzingData, 剩餘秒數=0.032000064849853516
I/flutter (14005): 心率=55.21213462445704
I/flutter (14005): 心率=55.21213462445704

Vitals™ SDK 中提供了更多生命體徵測評結果,我們也提供了測評結果的解讀指南。更多信息,請參閱 取得並展示健康測評結果 頁面。


🎉🎉🎉 恭喜! 🎉🎉🎉

您已完成您的第一個 Vitals™ 應用程式!


WARNING 重要提示

本指南僅提供使用 Flutter SDK 的最小可行產品 (MVP),我們 Vitals™ 雲端服務仍提供更多功能和更多操作,以確保測評結果準確可靠。例如:檢查掃描條件、使用 訊號質量 指標等等。更多詳情,請參閱 軟體開發指南 頁面、範例程式碼API 參考