【Flutter 學習筆記】如何在 macOS 上建置開發 iOS 應用程式環境

【Flutter 學習筆記】線上課程教學影片：連結

【Flutter 學習筆記】系列文章目錄：連結

本文將介紹如何在 macOS 環境中開發 iOS 應用程式。

硬體規格建議

在開始之前，請確保您的硬體符合以下規格：

• 處理器：至少 4 核心，建議 8 核心以獲得更佳效能
• 記憶體：至少 8GB，建議 16GB 以確保開發工具運作流暢
• 螢幕解析度：至少 WXGA (1366 x 768)，建議 FHD (1920 x 1080) 以提供更舒適的編輯和測試環境
• 可用硬碟空間：至少 44GB，建議 70GB 以便安裝必要的工具和相依套件

軟體需求

請確保您的軟體環境符合以下要求：

• 作業系統：macOS 13.0 (Ventura) 或更新版本
• 開發工具：
• • Xcode 15 或更新版本
  • CocoaPods 1.15 或更新版本

iOS 應用程式發布規定

iOS 應用程式發布上架的規定每年都會更新。以下是最新的重要資訊：

1. SDK 要求：
2. • 目前：開發者必須使用 Xcode 15 和 iOS 17 SDK（或更新版本）來建置應用程式。
   • 未來：自 2025 年 4 月起，所有上傳至 App Store Connect 的 iOS 和 iPadOS 應用程式都必須使用 iOS 18 SDK 進行建置。
2. 作業系統相容性：
3. • macOS 最低版本要求是 13.0 (Ventura) 或更新版本，才能安裝 Xcode 15 和 iOS 17 SDK（或更新版本）來建置可上架 App Store 的應用程式。
3. 持續關注更新：
4. • 開發者應密切關注 Apple 開發者網站 (developer.apple.com) 和 Flutter 官方網站 (flutter.dev)，以獲取最新的開發工具、SDK 更新資訊和政策變更。

遵循這些要求不僅可以確保您的應用程式符合 App Store 的上架標準，還能為使用者提供最佳的體驗。請定期檢查您的開發環境，並及時更新相關工具和 SDK。

開發環境設置

程式碼編輯器或整合式開發環境 (IDE)

您可以選擇以下任一程式碼編輯器或 IDE 進行開發：

• Visual Studio Code 1.77 或更新版本
• Android Studio 2023.3.1 或更新版本
• IntelliJ IDEA 2023.3 或更新版本

安裝 Flutter SDK

使用 VS Code 安裝 Flutter

1. 啟動 Visual Studio Code（VS Code）
2. 在 VS Code 中安裝 Flutter 和 Dart 擴充套件
3. 開啟命令面板（在 macOS 上使用快捷鍵 Command + Shift + P）
4. 輸入 flutter，選擇 Flutter: New Project
5. 如果尚未安裝 Flutter SDK：
6. • 選擇「Download SDK」選項
   • 指定下載位置，建議選擇易於管理的目錄，如 ~/development/flutter
6. 如果已安裝 Flutter SDK：
7. • 選擇「Locate SDK」選項
   • 指定已安裝的 Flutter SDK 路徑
7. 設定 Flutter 環境變數：
8. • 開啟終端機
   • 編輯 shell 配置文件（如 ~/.zshrc 或 ~/.bash_profile）
   • 新增環境參數：export PATH="$PATH:[Flutter SDK 的路徑]/flutter/bin"
   • 儲存文件並重新載入配置：source ~/.zshrc 或 source ~/.bash_profile
8. 重新啟動 VS Code 以確保所有設定生效

安裝 Rosetta 2

採用 Apple Silicon 晶片的 Mac 電腦（M1/M2/M3 系列）需要額外安裝 Rosetta 2，以相容執行所有 Flutter 元件。

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

搭載 Intel 晶片的 Mac 電腦則不需要特別安裝。

配置 iOS 開發環境

安裝與設定 Xcode

Xcode 是 iOS 開發的核心工具，對於 Flutter 開發也至關重要。以下是詳細的安裝和設定步驟：

1. 安裝 Xcode：
2. • 打開 Mac App Store。
   • 若未登入 Apple ID，請先登入。
   • 在搜尋欄輸入「Xcode」。
   • 點擊「取得」或「更新」按鈕開始安裝。
   • Xcode 程式容量約為 12 GB，安裝時間視您的網路速度而定。建議在網路穩定且有充足時間的情況下進行安裝。
2. 設定命令列工具：
3. • 安裝完成後，開啟終端機（Terminal）。
   • 設定已安裝的 Xcode 版本，輸入以下指令：

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

1. • 此路徑適用於最新版本的 Xcode。如需使用其他版本，請修改為相應路徑。
1. 簽署 Xcode 授權協議：
   這兩種方法都可以用來簽署 Xcode 授權協議，選擇其中一種即可。
2. • 方法一：在終端機中輸入以下指令：sudo xcodebuild -license
   • 方法二：首次啟動 Xcode 時
   • • 系統會自動提示您閱讀並同意授權協議
     • 仔細閱讀協議內容，然後點擊「同意」
     • 可能需要輸入管理員密碼來確認

安裝 CocoaPods

CocoaPods 是 iOS 開發中常用的依賴管理工具，對於使用 Flutter 插件的專案來說尤其重要。以下將介紹如何使用 Homebrew（簡稱 brew）來安裝 CocoaPods。

1. 安裝 Homebrew：
2. • 如果尚未安裝 Homebrew，請先安裝：

/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"

1. • 1. 開啟終端機（Terminal）
     2. 複製並貼上以下命令：
   • 1. 按下 Enter 鍵執行安裝
     2. 根據螢幕上的提示完成安裝過程
1. 使用 Homebrew 安裝 CocoaPods：
2. • 打開終端機。
   • 輸入以下命令：

brew install cocoapods

1. 驗證安裝：
2. • 安裝完成後，輸入以下命令檢查版本：

pod --version

1. • 如果顯示版本號（如 1.15.0），則表示安裝成功。
1. 更新 CocoaPods：
2. • 定期更新 CocoaPods 可確保與最新的 Flutter 插件相容：

brew upgrade cocoapods

通過以上步驟，您就完成了 iOS 開發環境的基本配置。這將使您能夠順利進行 Flutter 的 iOS 應用程式開發。記得定期更新 Xcode 和 CocoaPods，以確保與最新的 iOS SDK 和 Flutter 框架相容。

配置目標 iOS 設備

在 Flutter 開發中，你可以選擇使用模擬器或實體 iOS 設備進行測試和開發。以下是詳細的配置步驟：

iOS 模擬器配置

1. 新增模擬器：
2. • 開啟 Xcode，選擇「Window」>「Devices and Simulators」。
   • 頁籤選擇「Simulators」。
   • 在左下角點擊「+」按鈕。
   • 「Simulator name」，可為新模擬器命名（可選）。若不命名，系統會使用預設的裝置名稱。
   • 「Device Type」選擇目標設備類型（例如 iPhone 或 iPad）。
   • 「OS Version」選擇所需的 iOS 版本。如果尚未下載，點選「Download more simulator runtimes...」，系統會提示您進行下載。
   • 點擊「Create」完成創建。
2. 啟動模擬器：
3. • 在 Xcode 中，選擇 Xcode > Open Developer Tool > Simulator。
3. 選擇設備類型：
4. • 在模擬器中，選擇 File > Open Simulator > 你想要的設備。
4. 效能考量：
5. • 模擬器雖然方便，但可能無法完全模擬實體設備的效能。
   • 對於需要精確效能測試的場景，建議使用實體設備。

實體 iOS 設備配置

1. 連接設備：
2. • 使用 USB 傳輸線將你的 iOS 設備（如 iPhone 或 iPad）連接到 Mac。
   • 確保設備已解鎖並顯示主畫面。
2. 信任開發者電腦：
3. • 首次連接時，iOS 設備會彈出「信任此電腦？」的提示。

1. • 在 iOS 設備上點選「信任」，並輸入設備密碼進行確認。

在 Xcode 中設定：

1. • 打開 Xcode。
   • 進入 Xcode > Window > Devices and Simulators。
   • 在列表中找到你的設備，確保它被識別且狀態正常。

啟用開發者模式

未啟用開發者模式，系統顯示相關錯誤訊息

在 iOS 15 及之前的版本中，開發者可以直接使用 Xcode，而無需啟用任何額外模式。然而，在 iOS 16 及以後的版本中，開發者需要特別啟用開發者模式。啟用步驟如下：

1. 打開「設定」應用。
2. 前往「隱私權與安全性」。
3. 滑動到最底部找到「開發者模式」選項。
4. 點擊並開啟該選項後，系統會提示，需要重新開機，才能完成開發者模式的設定。

處理開發者帳號問題：

1. • 如果遇到「無法執行應用程式」、「尚未信任開發者」等錯誤，需要在 Xcode 中設定你的 Apple ID。
   • 進入 Xcode > Settings… > Accounts，進入 Xcode > Settings… > Accounts，點擊左下角「+」按鈕新增 Apple ID 或在列表中選擇你已經連接的 Apple ID。

1. • 使用 Xcode 開啟 Flutter 專案中的 iOS 資料夾。

1. • 在專案導覽器中選擇 Runner，然後在「Signing & Capabilities」頁籤中設定 Team，綁定你的 Apple ID。
   • 設定唯一且不重複的 Bundle Identifier，例如：「tw.ilovehkt.flutter1」。

1. • 點擊「Start the active scheme」的按鈕，這個按鈕看起來像播放音樂的圖，Xcode 將會簽署並打包應用程式，安裝到 iOS 設備中。
   • 在 iPhone 手機上，前往「設定」>「一般」>「VPN 與裝置管理」。
   • 在「開發者 APP」區段中，找到並點擊你的 Apple ID。
   • 點擊「信任」允許在此設備上執行你開發的應用程式。

1. • 注意：如果沒有看到選項，可能是因為尚未安裝任何開發版應用程式。

透過以上步驟，你可以靈活地在實體設備和模擬器之間切換，以滿足不同的開發和測試需求。記得定期在兩種環境中測試你的應用程式，以確保最佳的相容性和使用者體驗。

檢查開發環境

在開始開發之前，使用以下命令檢查你的開發環境是否配置正確：

flutter doctor

這個命令會列出所有已安裝的組件及其狀態，幫助你確保一切正常。

執行 flutter doctor 後，你會看到一份詳細的診斷報告：

• 綠色勾號（✓）表示該項目已正確設置，無需進一步操作。
• 紅色叉號（✗）或黃色驚嘆號（!）表示該項目存在問題或需要注意。

對於每個問題項目，診斷報告會提供：

1. 問題描述：清楚說明遇到的具體問題。
2. 解決方案：通常會給出詳細的修復步驟，可能包括：
3. • 安裝缺失的套件或工具
   • 調整系統環境變數
   • 更新特定軟體版本
   • 修正檔案或目錄的路徑設定

建議仔細閱讀每個問題的說明，並按照提供的解決方案逐一處理。解決所有問題後，再次運行 flutter doctor 以確認環境設置完全正確。

開始開發 iOS 應用程式

恭喜你完成了所有前置需求！現在你已經準備好使用 Flutter 開發 iOS 應用程式了。以下是一些建議，幫助你順利開始你的 iOS 開發之旅：

1. 熟悉 Flutter 開發環境：
2. • 使用 VS Code 或 Android Studio 等 IDE，並安裝 Flutter 和 Dart 插件。
   • 學習使用 Flutter DevTools 進行除錯和效能分析。
2. 學習 Dart 語言基礎：
3. • 掌握 Dart 的語法、物件導向概念和非同步程式設計。
   • 練習使用 Dart 的集合、泛型和空安全特性。
3. 理解 Flutter 框架：
4. • 學習 Widget 的概念和常用的 Material Design 元件。
   • 掌握狀態管理技術，如 setState、Provider 或 Riverpod。
4. 開發你的第一個應用：
5. • 從簡單的 UI 開始，逐步增加功能複雜度。
   • 實踐 Flutter 的熱重載（Hot Reload）功能，加速開發過程。
5. iOS 特定功能：
6. • 學習如何使用 iOS 特定的 API 和套件。
   • 了解如何適配不同 iOS 裝置的螢幕尺寸和安全區域。
6. 測試與最佳化：
7. • 編寫單元測試和整合測試，確保應用品質。
   • 使用 Flutter 的效能分析工具優化應用效能。
7. 持續學習：
8. • 關注 Flutter 官方文件和社群資源，了解最新的開發趨勢和最佳實踐。
   • 參與開源專案或 Flutter 社群活動，擴展你的技能和人脈。

如果這篇教學對你有所幫助，請記得按讚、分享並加入會員。這是對老師最好的支持，你的鼓勵將成為我們持續創作優質教學內容的最大動力。謝謝你的支持！