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

前言

想研究一下有沒有 AR 擴充實境類的專案，有找到幾個但執行起來空白的，花了不少時間。今天找到一個 arkit_flutter_plugin 的專案，成功在電腦前出現 AR 的物件了，所以今天要來介紹它。

介紹 arkit_flutter_plugin 專案

今天要介紹的Github專案，arkit_flutter_plugin 很不錯，他的範例APP 呈現了常見的 AR 運用場景，實測也都透過手機鏡頭看到物品出現在環境中，而值得研究看看。olexale/arkit_flutter_plugin 474 的星星。

他在 README.md 介紹的蠻詳細的，不過 AR 不太能用照片表現出來。

下載並編譯 arkit_flutter_plugin 專案

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

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

% git clone https://github.com/olexale/arkit_flutter_plugin.git

Cloning into 'arkit_flutter_plugin'...
remote: Enumerating objects: 120, done.
remote: Counting objects: 100% (120/120), done.
remote: Compressing objects: 100% (95/95), done.
remote: Total 2342 (delta 76), reused 50 (delta 25), pack-reused 2222
Receiving objects: 100% (2342/2342), 19.81 MiB | 6.33 MiB/s, done.
Resolving deltas: 100% (1628/1628), done.

% cd arkit_flutter_plugin/example  
% flutter pub get

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

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。總共有 20 個範例。

不過 AR 要透過手機鏡頭才看的到AR物件，所以調整一下 iOS 專案的憑證設定，讓APP可以傳到手機上測試。

我們先看看第一個AR範例的執行效果。

Hello World
The simplest scene with all geometries.

會在空中浮現 Flutter 字樣和幾個立體物件。

iPhone 11 的執行效果。

Earth
Sphere with an image texture and rotation animation.

會在空中浮現地球並且可以一直轉動。

iPhone 11 的執行效果。

Measure
Measures distances

可以量測點跟點之前的距離。

iPhone 11 的執行效果。

Custom Animation
Custom object animation. Port of https://github.com/eh3rrera/ARKitAnimation

可以客製動作，控制AR物件的動作。按下右下角的Play小人兒就會開始動，不過範例人偶看起來有點兇猛，跳起舞來有點反差萌.

iPhone 11 的執行效果。

還有其他動作，像臉部偵測、光源控制、360度環繞照片等等。有興趣可以編譯起來玩看看。

程式架構研究

Main.dart : Scaffold，Card，ListTile

在 VSCode 的樣子

主程式很簡單就一個列表，點擊後去呼叫相對應的 dart 檔來執行

以下是 lib 裡的目錄，先列表起來, 之後再細看研究.
lib 目錄

• check_support_page.dart
• custom_animation_page.dart
• custom_light_page.dart
• custom_object_page.dart
• distance_tracking_page.dart
• earth_page.dart
• face_detection_page.dart
• hello_world.dart
• image_detection_page.dart
• light_estimate_page.dart
• main.dart
• manipulation_page.dart
• measure_page.dart
• network_image_detection.dart
• occlusion_page.dart
• panorama_page.dart
• physics_page.dart
• plane_detection_page.dart
• real_time_updates.dart
• tap_page.dart
• widget_projection.dart

今天就先這樣吧。

好，第27天，寫完。

參考

• arkit_plugin 0.5.1
• arkit_flutter_plugin API reference
• olexale/flutter_roadmap