Wow! Flutter runs on Apple Vision Pro!

簡單的在 Vision Pro 上開發 Flutter APP

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

visionOS Overview

現在我們能在 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

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

My product

GitHub Source

GitHub - chyiiiiiiiiiiii/vision_pro

相關資訊

Add Apple Vision Pro as a target for Flutter · Issue #128313 · flutter/flutter

Articles

• Flutter Meetup #1 聚會有什麼？還有 Flutter 四月大小事！
• 提升開發效率的好物，Mason 讓你輕鬆撰寫自定義模板！
• 教你製作強大的 Rive 動畫，完成一隻 Flutter Dash，在 APP 跟它互動！
• Flutter 如何根據 Flavor 多環境載入對應的 Firebase Config
• Isolates 在 Flutter 3.7 & Dart 2.19 的升級，你該知道一下！
• 讓人驚艷的 Flutter Forward，釋出 Flutter 3.7 和 Dart 2.19
• 學會運用 Flutter Widgetbook，該管好自己和公司的元件庫了！
• 剛進入 Flutter 嗎？適合初學者食用，GetX 是否適合你呢！
• 你知道 Maestro 嗎，兼具人性的自動化測試框架，Flutter 品質就靠它了 — Part 1: 介紹與使用
• 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.1
• 輕鬆了解 Isar NoSQL DB，用它來實作 Flutter 資料庫吧！
• Flutter 輕鬆實作 i18n，使用 easy_localization_generator 就對了
• Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
• 使用 CodeMagic 和 Firebase 實現 Flutter CICD
• 輕鬆完成Flutter開發環境，最新版！
• Easily understand StatefulWidget LifeCycle of Flutter
• “freezed” makes model class strong and easily
• 提高Flutter性能的小技巧！(一)
• What are Async and Isolates in Flutter?
• LoadBalancer is optimization for Isolates in Flutter

About

• GitHub： chyiiiiiiiiiiii
• Instagram： flutterluvr.yii
• Linkedin： yiichenhi
• Youtube： Yii
• Youtube： 一起饅頭(美食頻道)
• Email： ab20803@gmail.com

Contribution

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

https://www.buymeacoffee.com/yiichenhi

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