yii.
← Writing
Flutter 技術 · · 5 min read

Wow! Flutter runs on Apple Vision Pro!

這篇寫於 2023 年。工具和 API 變化很快，部分步驟可能已經不適用。

簡單的在 Vision Pro 上開發 Flutter APP

從 6/21 Apple 發布 visionOS 以來，陸續在社群看到大家的分享，我也嘗試了一下，過程中會需要進行一些設定才能運行，將它們隨手做個紀錄。

visionOS OverviewAll-new platform. Familiar frameworks and tools. Get ready to build and design an entirely new universe of apps for…developer.apple.com

現在我們能在 Vision Pro 設備公開販售之前先開發，先做好準備，到時候直接讓用戶下載使用。等不及的朋友趕緊往下看吧！

Step 1. 確認系統版本#

確認 macOS 版本，需開啟 Beta 更新的選項，選擇 Sonoma 後進行下載和更新。新版為 Sonoma beta 14.0

Step 2.下載 Xcode beta#

升版後原本的 Xcode 就會無法使用，我們需要下載最新的 Xcode IDE，版本為 15 beta 2，確保有勾選 iOS17 以及 visionOS 1 beta，點擊箭頭下載

https://developer.apple.com/download/all/?q=Xcode
左邊為 Xcode，右邊為 Simulator
左邊為 Xcode，右邊為 Simulator

Step 3. 新增 Apple Vision Pro 設備#

開啟 Xcode，要先確認 iOS 版本為 17.0，不是的話上方的訊息框可以點擊下載

打開 Window → Devices and Simulators，新增 Vision Pro 設備到我們的清單裡

如果這時候點擊 Vision Pro 選項，看到了 unknow runtime 錯誤訊息，代表還沒有下載到相關資源與設定。

開啟 Xcode Setting，在 Platforms 裡可以查看每個 OS 的狀況，點擊 GET 下載 visonOS 1.0 beta，下載完我們就能順利添加設備了

Step 4. 新增專案的 Destination SDK#

這時候如果你要啟動 APP，可能會在設備清單裡找不到 Vision Pro 選項，我們還要再做一點設定。

到 Build Settings 分頁，需要調整 Base SDK 為 visionOS

接著側邊欄選擇 TARGETS → Runner，針對 Supported Destinations 增加 Apple Vision for iPad 選項

Step 5. 啟動你的 Flutter APP#

Vision Pro 開啟後的樣子，有多個視角可以調整，想像一下戴上它的感覺

運行最基本的 Counter app，感覺真不錯，有沒有想法要實踐了呢

Counter App
Counter App
My product
My product

GitHub Source#

GitHub - chyiiiiiiiiiiii/vision_proContribute to chyiiiiiiiiiiii/vision_pro development by creating an account on GitHub.github.com

相關資訊#

Add Apple Vision Pro as a target for Flutter · Issue #128313 · flutter/flutterUse case The apple vision pro was released yesterday. It would be nice to have support for that. Even though most apps…github.com

Articles#

About#

Contribution#

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～

本文原刊登於 Medium。