軟體要求

#

要編寫和編譯適用於 iOS 的 Flutter 程式碼,請安裝以下軟體包。

作業系統

#

Flutter 支援在 macOS 12 (Monterey) 或更高版本上開發。本指南假定您的 Mac 執行 zsh 作為您的 預設 Shell

一些 Flutter 元件需要 Rosetta 2 翻譯過程。如果你在 Apple Silicon (ARM) Mac 上進行開發,請安裝 Rosetta 2

sudo softwareupdate --install-rosetta --agree-to-license

開發工具

#

下載並安裝以下軟體包。

  • Xcode,用於除錯和編譯原生 Swift 或 Objective-C 程式碼。Xcode 安裝還包括 Git,用於管理 Flutter 版本和你自己的原始碼版本控制。
  • CocoaPods,用於在原生應用中編譯和啟用 Flutter 外掛。

上述軟體的開發者提供這些產品的支援。要解決安裝問題,請查閱該產品的文件。

文字編輯器或整合開發環境

#

你可以使用任何文字編輯器或整合開發環境 (IDE) 結合 Flutter 的命令列工具來構建應用。

使用帶有 Flutter 擴充套件或外掛的 IDE 可提供程式碼補全、語法高亮、小部件編輯輔助、除錯及其他功能。

流行的選項包括

安裝 Flutter SDK

#

要安裝 Flutter SDK,你可以使用 VS Code Flutter 擴充套件,或自行下載並安裝 Flutter 包。

使用 VS Code 安裝 Flutter

#

要按照這些說明安裝 Flutter,請驗證您已安裝 Visual Studio CodeVS Code 版 Flutter 擴充套件

提示 VS Code 安裝 Flutter

#
  1. 啟動 VS Code。

  2. 要開啟命令面板,請按 Command + Shift + P

  3. 命令面板中,輸入 flutter

  4. 選擇Flutter: 新建專案

  5. VS Code 會提示你定位電腦上的 Flutter SDK。

    1. 如果你已安裝 Flutter SDK,請點選定位 SDK

    2. 如果你未安裝 Flutter SDK,請點選下載 SDK

      如果您尚未按照開發工具先決條件中的說明安裝 Git,此選項會將您帶到 Flutter 安裝頁面。

  6. 當提示哪個 Flutter 模板?時,請忽略。按 Esc。你可以在檢查開發環境設定後建立一個測試專案。

下載 Flutter SDK

#
  1. 當顯示選擇 Flutter SDK 資料夾對話方塊時,選擇你想要安裝 Flutter 的位置。

    VS Code 會首先將你定位到使用者配置檔案目錄。請選擇其他位置。

    考慮使用 ~/development/

  2. 點選克隆 Flutter

    下載 Flutter 時,VS Code 會顯示以下彈窗通知:

    Downloading the Flutter SDK. This may take a few minutes.
    Initializing the Flutter SDK. This may take a few minutes.

    下載和安裝需要幾分鐘。如果你懷疑下載已卡住,請點選取消,然後重新開始安裝。

    Flutter 安裝成功後,VS Code 會顯示此彈窗通知:

    Do you want to add the Flutter SDK to PATH so it's accessible
    in external terminals?
  3. 點選新增 SDK 到 PATH

    成功時,會顯示通知

    The Flutter SDK was added to your PATH
  4. VS Code 可能會顯示 Google Analytics 通知。

    如果你同意,點選確定

  5. 在所有終端視窗中啟用 flutter

    1. 關閉,然後重新開啟所有終端視窗。
    2. 重新啟動 VS Code。

下載然後安裝 Flutter

#

要安裝 Flutter,請從其存檔下載 Flutter SDK 包,將該包移動到你希望儲存的位置,然後解壓 SDK。

  1. 下載以下安裝包以獲取 Flutter SDK 的最新穩定版本。

    英特爾處理器Apple 晶片
    (載入中...)(載入中...)

    對於其他釋出渠道和舊版本,請查閱 SDK 存檔

    Flutter SDK 應下載到 macOS 預設下載目錄:~/Downloads/

  2. 建立一個你可以安裝 Flutter 的資料夾。

    考慮在 ~/development/ 建立一個目錄。

  3. 將檔案解壓到你希望儲存 Flutter SDK 的目錄中。

    unzip ~/Downloads/flutter_sdk_v1.0.0.zip \
           -d ~/development/

    完成後,Flutter SDK 應位於 ~/development/flutter 目錄中。

將 Flutter 新增到您的 PATH

#

要在終端中執行 Flutter 命令,請將 Flutter 新增到 PATH 環境變數中。本指南假定你的 Mac 執行的是最新的預設 shell,即 zsh。Zsh 使用 .zshenv 檔案來設定 環境變數

  1. 啟動您偏好的文字編輯器。

  2. 如果存在,請在您的文字編輯器中開啟 Zsh 環境變數檔案 ~/.zshenv。如果不存在,請建立 ~/.zshenv

  3. 複製以下行並將其貼上到您的 ~/.zshenv 檔案末尾。

    bash
    export PATH=$HOME/development/flutter/bin:$PATH
  4. 儲存您的 ~/.zshenv 檔案。

  5. 要應用此更改,請重新啟動所有開啟的終端會話。

如果您使用其他 Shell,請查閱此關於設定 PATH 的教程

配置 iOS 開發

#

安裝和配置 Xcode

#

要開發適用於 iOS 的 Flutter 應用,請安裝 Xcode 以編譯為原生位元組碼。

  1. 開啟 **App Store** 並登入。

  2. 搜尋 Xcode

  3. 點選安裝

    Xcode 安裝程式需要 6 GB 以上的儲存空間。下載可能需要一些時間。

  4. 要配置命令列工具以使用已安裝的 Xcode 版本,請使用以下命令。

    sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

    使用此路徑指向最新版本的 Xcode。如果你需要使用不同版本,請改用相應的路徑。

  5. 簽署 Xcode 許可協議。

    sudo xcodebuild -license

儘量使用當前版本的 Xcode。

配置你的目標 iOS 裝置

#

藉助 Xcode,你可以在 iOS 裝置或模擬器上執行 Flutter 應用。

配置你的 iOS 模擬器

#

要準備在 iOS 模擬器上執行和測試你的 Flutter 應用,請按照以下步驟操作。

  1. 要安裝 iOS 模擬器,請執行以下命令。

    xcodebuild -downloadPlatform iOS
  2. 要啟動模擬器,請執行以下命令

    open -a Simulator

設定你的目標物理 iOS 裝置

#

要將你的 Flutter 應用部署到物理 iPhone 或 iPad,你需要執行以下操作:

  • 建立 Apple Developer 賬戶。
  • 在 Xcode 中設定物理裝置部署。
  • 建立開發配置檔案以自簽名證書。
  • 如果你的應用使用 Flutter 外掛,請安裝第三方 CocoaPods 依賴項管理器。
建立你的 Apple ID 和 Apple Developer 賬戶
#

你現在可以跳過此步驟。在你準備將應用分發到 App Store 之前,實際上不需要 Apple Developer 賬戶。

如果你只需要測試部署你的應用,請完成第一步,然後繼續下一節。

  1. 如果你還沒有 Apple ID,請建立一個。

  2. 如果你尚未註冊 Apple Developer Program,請立即註冊。

    要了解有關會員型別的更多資訊,請檢視 選擇會員型別

將你的物理 iOS 裝置連線到 Mac
#

配置你的物理 iOS 裝置以連線到 Xcode。

  1. 將你的 iOS 裝置插入 Mac 的 USB 埠。

  2. 首次將 iOS 裝置連線到 Mac 時,你的 iOS 裝置會顯示 **信任此電腦?** 對話方塊。

  3. 點選 **信任**。

    Trust Mac

  4. 出現提示時,解鎖你的 iOS 裝置。

啟用 iOS 16 或更高版本的開發者模式
#

從 iOS 16 開始,Apple 要求你啟用 **開發者模式** 以防止惡意軟體。在部署到執行 iOS 16 或更高版本的裝置之前,請啟用開發者模式。

  1. 點選 **設定** > **隱私與安全性** > **開發者模式**。

  2. 點選以將 **開發者模式** 切換到 **開啟**。

  3. 點選 **重新啟動**。

  4. iOS 裝置重啟後,解鎖你的 iOS 裝置。

  5. 當 **開啟開發者模式?** 對話框出現時,點選 **開啟**。

    對話方塊解釋說,開發者模式會降低 iOS 裝置的安全性。

  6. 解鎖你的 iOS 裝置。

啟用開發者程式碼簽名證書
#

要部署到物理 iOS 裝置,你需要與你的 Mac 和 iOS 裝置建立信任。這需要你將簽名的開發者證書載入到你的 iOS 裝置。要為 Xcode 中的應用簽名,你需要建立一個開發配置檔案。

要配置你的專案,請遵循 Xcode 的簽名流程。

  1. 啟動 Xcode。

  2. 轉到 **Xcode** > **設定...**

    1. 轉到 **Xcode** > **設定...**
    2. 點選 **賬戶**。
    3. 點選 **+**。
    4. 選擇 **Apple ID** 並點選 **繼續**。
    5. 出現提示時,輸入你的 **Apple ID** 和 **密碼**。
    6. 關閉 **設定** 對話方塊。

    開發和測試支援任何 Apple ID。

  3. 轉到 **檔案** > **開啟...**

    你也可以按 Cmd + O

  4. 導航到你的 Flutter 專案目錄。

  5. 開啟專案中的預設 Xcode 工作區:ios/Runner.xcworkspace

  6. 在執行按鈕右側的裝置下拉選單中,選擇你打算部署到的物理 iOS 裝置。

    它應該會出現在 **iOS 裝置** 標題下。

  7. 在左側導航面板的 **Targets** 下,選擇 **Runner**。

  8. 在 **Runner** 設定窗格中,點選 **Signing & Capabilities**。

  9. 選擇頂部的 **All**。

  10. 選擇 **Automatically manage signing**(自動管理簽名)。

  11. 從 **Team**(團隊)下拉選單中選擇一個團隊。

    團隊在你的 Apple Developer 賬戶頁面的 **App Store Connect** 部分建立。如果你沒有建立團隊,可以選擇一個*個人團隊*。

    Team(團隊)下拉選單將此選項顯示為 **Your Name (Personal Team)**(你的姓名(個人團隊))。

    Xcode account add

    選擇團隊後,Xcode 會執行以下任務:

    1. 建立並下載開發證書
    2. 在你的賬戶中註冊裝置,
    3. 如果需要,建立並下載配置檔案

如果 Xcode 中的自動簽名失敗,請驗證專案 **General**(通用)> **Identity**(標識)> **Bundle Identifier**(捆綁識別符號)的值是否唯一。

Check the app's Bundle ID

啟用你的 Mac 和 iOS 裝置的信任
#

當你首次連線物理 iOS 裝置時,請啟用你的 Mac 和 iOS 裝置上的開發證書的信任。

當你 將裝置連線到 Mac 時,你應該已經啟用了你的 Mac 在 iOS 裝置上的信任。

為你的 iOS 裝置啟用開發者證書
#

在不同版本的 iOS 中啟用證書的方式有所不同。

  1. 在 iOS 裝置上開啟 **Settings**(設定)應用。

  2. 點選 **General**(通用)> **Profiles & Device Management**(描述檔案與裝置管理)。

  3. 點選以將你的證書切換為 **Enable**(啟用)

  1. 在 iOS 裝置上開啟 **Settings**(設定)應用。

  2. 點選 **General**(通用)> **VPN & Device Management**(VPN 與裝置管理)。

  3. 點選以將你的證書切換為 **Enable**(啟用)。

  1. 在 iOS 裝置上開啟 **Settings**(設定)應用。

  2. 點選 **General**(通用)> **VPN & Device Management**(VPN 與裝置管理)。

  3. 在 **Developer App**(開發者應用)標題下,你應該能找到你的證書。

  4. 點選你的證書。

  5. 點選 **Trust "<certificate>"**(信任“<證書>”)。

  6. 當對話方塊顯示時,點選 **Trust**(信任)。

如果顯示 **codesign 想要訪問金鑰...** 對話方塊

  1. 輸入你的 macOS 密碼。

  2. 點選 **Always Allow**(始終允許)。

在 iOS 裝置上設定無線除錯(可選)

#

要使用 Wi-Fi 連線除錯你的裝置,請按照以下步驟操作。

  1. 將你的 iOS 裝置連線到與你的 macOS 裝置相同的網路。

  2. 為你的 iOS 裝置設定密碼。

  3. 開啟 **Xcode**。

  4. 轉到 **Window**(視窗)> **Devices and Simulators**(裝置和模擬器)。

    你也可以按 Shift + Cmd + 2

  5. 選擇你的 iOS 裝置。

  6. 選擇 **Connect via Network**(透過網路連線)。

  7. 一旦裝置名稱旁邊出現網路圖示,請斷開你的 iOS 裝置與 Mac 的連線。

如果你在使用 flutter run 時未看到你的裝置列出,請延長超時時間。超時預設設定為 10 秒。要延長超時時間,請將值更改為大於 10 的整數。

flutter run --device-timeout 60

安裝 CocoaPods

#

如果你的應用依賴於包含原生 iOS 程式碼的 Flutter 外掛,請安裝 CocoaPods。此程式會捆綁 Flutter 和 iOS 程式碼中的各種依賴項。

要安裝和設定 CocoaPods,請執行以下命令:

  1. 按照 CocoaPods 安裝指南安裝 cocoapods

    sudo gem install cocoapods
  2. 啟動您偏好的文字編輯器。

  3. 在文字編輯器中開啟 Zsh 環境變數檔案 ~/.zshenv

  4. 複製以下行並將其貼上到您的 ~/.zshenv 檔案末尾。

    bash
    export PATH=$HOME/.gem/bin:$PATH
  5. 儲存您的 ~/.zshenv 檔案。

  6. 要應用此更改,請重新啟動所有開啟的終端會話。

檢查開發環境設定

#

幫助

執行 Flutter doctor

#

flutter doctor 命令驗證 macOS 完整 Flutter 開發環境的所有元件。

  1. 開啟您的終端。

  2. 要驗證所有元件的安裝,請執行以下命令。

    flutter doctor

由於你選擇為 iOS 開發,因此你不需要所有元件。如果你按照本指南進行操作,命令應該會顯示已設定的工具和平臺為 [✓]

Flutter doctor 問題排查

#

flutter doctor 命令返回錯誤時,可能與 Flutter、VS Code、Xcode、已連線裝置或網路資源有關。

如果 flutter doctor 命令針對這些元件中的任何一個返回錯誤,請使用詳細模式標誌再次執行它。

flutter doctor -v

檢查輸出,看是否需要安裝其他軟體或執行其他任務。

如果你更改了 Flutter SDK 或其相關元件的配置,請再次執行 flutter doctor 來驗證安裝。

開始使用 Flutter 在 macOS 上開發 iOS 應用

#

恭喜。 已經安裝了所有先決條件和 Flutter SDK,你就可以在 macOS 上開始開發適用於 iOS 的 Flutter 應用了。

要繼續你的學習之旅,請查閱以下指南:

管理 Flutter SDK

#

要了解更多關於管理 Flutter SDK 安裝的資訊,請查閱以下資源: