於 macOS 設置 iOS 開發環境

系統需求

硬體需求

項目	建議需求
CPU 核心數	8
記憶體 (GB)	16
可用硬碟空間 (GB)	70.0

軟體需求

提示

Flutter SDK 已包含其對應的 Dart SDK，你不需自行額外安裝 Dart SDK。

作業系統

• macOS 10.15 (Catalina) 或以上

開發工具

請下載安裝以下軟體：

• Xcode 15 來除錯及編譯原生程式碼 (如 Swift, Objective-C)。Xcode 安裝已包含了 Git，來管理程式碼。

  注意

  盡量使用最新版本 Xcode，但不要選擇帶有 beta 字眼的版本。

  安裝

  1. 打開並登入 App Store：

  2. 搜尋 Xcode。

  3. 點擊 取得。

  4. 安裝好後，執行以下指令來設置命令列工具使用已安裝的 Xcode 版本：

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

     使用以上路徑可找到最新版本的 Xcode。若你需要使用其他版本，請指定該版本路徑。

     提示

     舉例，安裝的 Xcode 名稱顯示為 Xcode-15.1.0，則須將上述指令調整為：

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

  5. 簽署 Xcode 許可協議

     sudo xcodebuild -license

• Cocoapods 1.15 或更高版本 將 Flutter 插件套用於 iOS app。

  安裝

  1. 使用 brew 進行安裝，在 Terminal 執行以下命令：

     brew install cocoapods

  2. 完成後再執行：

     brew link cocoapods

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

你可使用任意編輯器或整合開發環境 (IDE)，並结合 Flutter 的命令列工具進行建構；或使用帶有 Flutter 擴展或插件的 IDE，提供程式碼補全、語法突顯等等功能。

常見熱門 IDE 與對應之套件有：

• Visual Studio Code 1.77 或更高版本，搭配 Flutter extension for VS Code
• Android Studio 2023.2.1 (Iguana) 或更高版本，搭配 Flutter plugin for IntelliJ
• IntelliJ IDEA 2023.2 或更高版本 (需付費，有試用版) 搭配 Flutter plugin for IntelliJ

推薦

Flutter 團隊推薦安装 Visual Studio Code，搭配 Flutter extension for VS Code。這樣可以簡化並最快速的完成 Flutter SDK 安裝。

安裝 Flutter SDK

以下教學我們皆會將 Flutter SDK 放置在 ~/development/flutter/。你可以自行選擇想要放置的位置。

注意

不要將 Flutter SDK 放置到以下目錄或路徑中：

• 路徑包含特殊字元或空格。

例：~/我的專案/ 就屬於以上狀況。

• 使用 VS code 安裝
• 自行下載安裝設定

根據 VS Code 提示，安裝 Flutter

1. 啟動 VS Code

   ▼ VS Code 起始頁

   

2. 開啟 Extension 頁面，快捷鍵：⌘ command + ⇧ shift + X。

   ▼ 開啟 Extension 頁面

   

3. 輸入 flutter 尋找並安裝該 extension。

   ▼ 搜尋並安裝 Flutter extension

   

4. 開啟命令面板 (Command Palette)，⌘ command + ⇧ shift + P。
   於命令面板 (Command Palette) 輸入：flutter。
   選擇 Flutter: New Project 。

   ▼ Flutter: New Project

   

5. VS Code 將會表示無法找到 Flutter SDK。
   點選 Download SDK。

   ▼ 點選 Download SDK 進行下載

   

6. 當對話框 Select Folder for Flutter SDK 顯示時，選則你想要安裝的位置。
   點擊 Clone Flutter。

   ▼ 選擇放置 Flutter SDK 路徑

   

7. VS Code 開始下載 Flutter SDK 時會出現下列通知：

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

   此下載需要些時間，若你懷疑下載未正常執行，請按下 Cancel 取消下載後，再重新嘗試安裝(從步驟 4. 開始)。

   ▼ 正在下載 Flutter SDK 畫面

   

8. Flutter SDK 完成下載後會開始初始化，跳出通知：

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

   輸出 (Output) 面板會出現並顯示：

   Downloading Dart SDK from the Flutter engine ...

   ▼ 初始化 Flutter SDK 中

   

   註記

   此階段最後會執行 flutter doctor -v。請忽略此時的輸出，因 Flutter Doctor 可能會顯示尚未完成其他設置的錯誤。

9. Flutter 安裝成功後，VS Code 會出現以下通知：

   Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?

   ▼ Flutter 設置完成

   

10. 點擊 Copy SDK path to Clpiboard 複製 Flutter 安裝路徑。
    請至下方 將 Flutter 加入 PATH 完成後續設定。

    ▼ 複製 Flutter 路徑

    

下載並安裝 Flutter

在 ~/ 建立 development 資料夾。

之後選擇下列方式取得 Flutter SDK 檔案：

• 從版本檔案庫
• 從 Flutter GitHub clone

從 版本檔案庫，Stable 版本 中選擇 Flutter Version 3.24.0。

我該下載 x64 還是 ARM 版本？

• Apple CPU (Mac) 請下載 ARM
• Intel CPU (Mac) 請下載 x64

我的 Mac 是哪個晶片？

你可透過以下方式查看：螢幕左上  ＞ 關於這台 Mac ＞ 晶片

• M 系列晶片 (M1, M2, ...) → Apple CPU
• 其餘 → Intel CPU

將下載的壓縮檔解壓縮至 ~/development/。

可使用下列指令進行解壓縮：

unzip ~/Downloads/flutter_macos_3.24.0-stable.zip -d ~/development/

完成後，Flutter SDK 應會位於 ~/development/flutter/ 中。

從 Flutter Github clone 專案：

git clone https://github.com/flutter/flutter ~/development/

完成後，Flutter SDK 應會位於 ~/development/flutter/ 中。

請至下方 將 Flutter 加入 PATH 完成後續設定。

將 Flutter 加入 PATH

以下將舉兩個範例：bash 及 zsh 的設定方式，如你使用的是其他 shell，請自行搜尋加入 PATH 的方式。

• bash
• zsh

1. 在 Terminal 輸入：

   nano ~/.bashrc

2. 將以下內容新增至 ~/.bashrc 文件最末行。

   export PATH=$HOME/development/flutter/bin:$PATH

3. 儲存變更：

   1. ⌃ control + X 離開文本。

   2. nano 會顯示 Save modified buffer?，按下 Y 確認儲存。

   3. nano 會顯示 File Name to write : /Users/{user_name}/.bashrc，按下 ↵ enter 確認完成。

4. 重啟所有打開的 Terminal 視窗，來應用剛剛做的變更。
   或直接在 Terminal 輸入

   source ~/.bashrc

1. 在 Terminal 輸入：

   nano ~/.zshenv

2. 將以下內容新增至 ~/.zshenv 文件最末行。

   export PATH=$HOME/development/flutter/bin:$PATH

3. 儲存變更：

   1. ⌃ control + X 離開文本。

   2. nano 會顯示 Save modified buffer?，按下 Y 確認儲存。

   3. nano 會顯示 File Name to write : /Users/{user_name}/.zshenv，按下 ↵ enter 確認完成。

4. 重啟所有打開的 Terminal 視窗，來應用剛剛做的變更。
   或直接在 Terminal 輸入

   source ~/.zshenv

設置 iOS 設備

注意

黑客松參與者請 設置虛擬機 進行成果展示。

注意

因要部署到 iOS 實體機上的需求過高，因此我們將只教學設置虛擬機。
部署到 iOS 實體機上你會需要：

• 創建 Apple ID 帳戶；至 Apple Developer Program 註冊並開通開發者帳號 (Developer Account) (需支付年費)。
• 設定開發配置文件 (Provisioning Profile)、並自行簽名證書 (Signing Certificate)。

設置 iOS 虛擬機

1. 執行以下指令來安裝 iOS 虛擬機：

   xcodebuild -downloadPlatform iOS

2. 在 Xcode 中確認是否已有虛擬機設備：

   1. 開啟 Xcode。

      ▼ Xcode 起始頁

      

   2. 在選單列打開 Window ＞ Device and Simulators。快捷鍵：⌘ command + ⇧ shift + 2。
      於開啟的視窗畫面左側點擊 Simulators。

      ▼ Xcode Device and Simulators

      

   3. 若無虛擬機，請點擊視窗左下 + 創建一個新的虛擬機。

      ▼ Xcode Device and Simulators

      

3. 執行以下指令來啟動 iOS 虛擬機：

   open -a Simulator

   ▼ 開啟 iOS 虛擬機

   

檢查你的開發環境

執行 flutter doctor

執行 flutter doctor 指令來快速檢查你的電腦是否已設置好 Flutter 開發 Android app 的環境。

1. 打開 Terminal。

2. 輸入以下指令：

   flutter doctor

3. 若你是依據本文設置 Android app 開發環境，你的電腦並不一定會有 flutter doctor 檢測的所有設置。你的輸出結果應當類似於：

   Running flutter doctor...
   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel stable, 3.24.0, on macOS ...).
   [!] Android toolchain - develop for Android devices
   [!] Chrome - develop for the web
   [✓] Xcode - develop for iOS and macOS
   [!] Android Studio (not installed)
   [✓] VS Code (version ...)
   [✓] Connected device (1 available)
   [✓] Network resources
   
   
   ! Doctor found issues in ... categories.

   其中 highlight 為必要條件：

   • Flutter：編譯 Flutter。
   • Xcode：編譯 iOS app。
   • Connected device：需有裝置 (模擬器) 執行 app 並進行成果展示。
   • Network resources：編譯過程套件需網路資源下載、更新。

解決 flutter doctor 反應的問題

當 flutter doctor 回報錯誤時，可能是 Flutter、VS Code、Android Studio、連接的設備或網路連線出錯。

你可使用 verbose flag (-v) 再次執行，獲得更多資訊或解決方式：

flutter doctor -v

查看輸出結果，了解可能需要安裝的其他軟體或需要執行的指令。

若你未來更改了 Flutter SDK 或其他組件的配置，請再次執行 flutter doctor 來進行檢查。

開始使用 Flutter 開發 Android on macOS 程式

恭喜你！ 現在你已設置了所有必要條件與 Flutter SDK，你可以開始使用 macOS 開發 iOS app、編譯 Flutter 程式了。