開始在 macOS 上建立 Flutter Android 應用

系統要求

在安裝和執行 Flutter 前,你的 macOS 環境必須滿足以下要求:

硬體要求

你的 macOS Flutter 開發環境必須滿足以下最低硬體要求。

要求 最低 推薦
CPU 核心數 4 8
記憶體 (GB) 8 16
顯示器解析度(畫素) WXGA (1366 x 768) FHD (1920 x 1080)
可用磁碟空間 (GB) 10.0 18.0

軟體要求

要為 Android 編寫和編譯 Flutter 程式碼,請安裝以下軟體套件。

作業系統

Flutter 支援 macOS 10.15 (Catalina) 或更高版本。本指南假定你的 Mac 預設執行 zsh shell。

如果需要驗證 shell 的設定,請點選展開此部分

macOS 與大多數「類 UNIX」作業系統一樣, macOS 可以支援多種 shell,如 bashzshsh。從 2019 年 10 月發布的 macOS Catalina (macOS 10.15) 開始, Zsh 或 zsh 成為了 macOS 的預設 shell。

檢查並將 zsh 設定為預設

  1. 請執行 目錄服務指令行程式 來驗證 zsh 是否被設定為 macOS 的預設 shell。

     $ dscl . -read ~/ UserShell
    

    應該會列印以下內容。

     UserShell: /bin/zsh
    

    如果確認為預設,你可以跳過剩餘的步驟。

  2. 如果需要安裝 zsh,請按照 Wiki 中的步驟進行操作。

  3. 如果需要將預設的 shell 更改為 zsh,請執行 chsh 指令。

     $ chsh -s `which zsh`
    

如果需要瞭解更多關於 macOS 和 zsh 的訊息,請查閱 macOS 文件中的 在 Mac 上使用 zsh 作為預設 shell

如果你的 Mac 是 Apple silicon 處理器,那麼有些 Flutter 元件就需要透過 Rosetta 2 來轉換適配(詳情)。要在 Apple silicon 處理器上執行所有 Flutter 元件,請執行以下指令來安裝 Rosetta 2

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

開發工具

下載並安裝以下軟體套件。

  • Android Studio 2023.1 (Hedgehog) to debug and compile Java or Kotlin code for Android. Flutter requires the full version of Android Studio.

Android Studio 2023.1 (Hedgehog) 除錯和編譯 Android 的 Java 或 Kotlin 程式碼。 Flutter 需要完整版本的 Android Studio。

  • Git 2.27 或更高版本來管理原始碼。 To check if you have git installed, type git version in your Terminal. If you need to install git, type brew install git.

如果需要檢查是否安裝了 git,請在終端中輸入 git version。如果需要安裝 git,請輸入 brew install git

上述軟體的開發商為這些產品提供支援。如果需要排除安裝的問題,請查閱該產品的文件。

當你在當前版本執行 flutter doctor 的時候,它可能會列出這些軟體套件的其他不同版本。如果出現這種情況,請安裝它推薦的版本。

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

你可以使用任意文字編輯器或整合開發環境 (IDE),並結合 Flutter 的指令行工具,來使用 Flutter 建立應用程式。

使用帶有 Flutter 擴充套件或外掛的 IDE 會提供程式碼自動補全、語法高亮、widget 編寫輔助、除錯以及其他功能。

以下是熱門的擴充套件外掛:

安裝 Flutter SDK

你可以使用 VS Code Flutter 擴充套件或自行下載安裝 Flutter 壓縮封裝,來安裝 Flutter SDK。

使用 VS Code 安裝 Flutter

在使用以下流程來安裝 Flutter 前,請確保你已經安裝 Visual Studio Code 1.77 或更高版本,以及 Flutter extension for VS Code

根據 VS Code 的提示,安裝 Flutter

  1. 啟動 VS Code。

  2. 開啟 指令面板 (Command Palette),按下快捷鍵 Command + Shift + P

  3. 指令面板 (Command Palette) 中輸入 flutter

  4. 選擇 Flutter: New Project

  5. VS Code 會提示你在電腦上找到 Flutter SDK。

    1. 如果你已經安裝 Flutter SDK,請單擊 Locate SDK

    2. 如果你沒有安裝 Flutter SDK, 請單擊 Download SDK

      如果你沒有按照 開發工具的必要條件 安裝 Git ,單擊該按鈕後會導向至 Flutter 安裝頁面。

  6. 當提示 Which Flutter template? 的時候,請忽略它。可以按下 Esc。你可以在檢查完開發設定後建立初始測試專案。

下載 Flutter SDK

  1. 當對話框 Select Folder for Flutter SDK 顯示時,選擇你想要安裝 Flutter 的位置。

    VS Code 會開啟你預設的位置。你可以選擇其他位置。

    請考慮 ~/development/ 這樣的位置

  2. 單擊 Clone Flutter

    在下載 Flutter 時,VS Code 會彈出該通知:

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

    下載需要一些時間。如果你懷疑下載被掛起,請單擊 Cancel 取消下載後,再重新嘗試安裝。

  3. Flutter 一旦完成下載, 輸出 (Output) 面板就會顯示。

    Checking Dart SDK version...
    Downloading Dart SDK from the Flutter engine ...
    Expanding downloaded archive...
    

    成功後,VS Code 會彈出該通知:

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

    初始化時,輸出 (Output) 面板會顯示下面的內容:

    Building flutter tool...
    Running pub upgrade...
    Resolving dependencies...
    Got dependencies.
    Downloading Material fonts...
    Downloading Gradle Wrapper...
    Downloading package sky_engine...
    Downloading flutter_patched_sdk tools...
    Downloading flutter_patched_sdk_product tools...
    Downloading windows-x64 tools...
    Downloading windows-x64/font-subset tools...
    

    該程序還會執行 flutter doctor -v。此時,請忽略該輸出。因為 Flutter Doctor 可能會顯示與本次快速啟動無關的錯誤。

    Flutter 安裝成功後,VS Code 會彈出該通知:

    Do you want to add the Flutter SDK to PATH so it's accessible
    in external terminals?
    
  4. VS Code 可能會顯示一則 Google Analytics 的通知。

    如果你同意,請單擊 OK

  5. 在所有 Terminal 視窗中啟用 flutter

    1. 關閉,然後重新開啟所有 Terminal 視窗。

    2. 重新啟動 VS Code。

下載並安裝 Flutter

從歸檔清單中下載 Flutter SDK 壓縮封裝,將壓縮封裝移動到你想要的位置,然後解壓 SDK,以此來安裝 Flutter。

  1. 下載以下 Flutter SDK 最新 stable 版本的壓縮封裝。

    Intel 處理器   Apple Silicon 處理器
    (獲取中…)   (獲取中…)

    關於其他發布渠道和舊版本,請查閱 Flutter SDK 歸檔清單

    Flutter SDK 應該會下載至 macOS 預設下載目錄: ~/Downloads/

  2. 建立一個資料夾,用於安裝 Flutter。

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

  3. 將 Flutter SDK 壓縮文件 (zip) 解壓到你想要儲存的目錄中。可以使用以下指令進行解壓。

    $ unzip ~/development/flutter_sdk_v1.0.0.zip -d ~/development/
    

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

將 Flutter 新增至 PATH

要在 Terminal 中執行 Flutter 指令,請將 Flutter 新增到 PATH 環境變數中。本指南假定你的 Mac 執行的是最新的預設 shellzsh。 Zsh 使用 .zshenv 檔案來處理 環境變數

  1. 啟動你喜歡的文字編輯器。

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

  3. 複製以下內容並貼上到 ~/.zshenv 檔案內的末尾。

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

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

如果你使用其他 shell,請查閱 設定 PATH 的教程

如果你已經安裝了所有必要條件和 Flutter SDK,你應該就可以在 macOS 上為 Android 開發 Flutter。

設定 Android 開發

在 Android Studio 中設定 Android toolchain

help 幫助

  1. 啟動 Android Studio

    顯示 Welcome to Android Studio 的對話框。

  2. 按照 Android Studio Setup Wizard 操作。

  3. 安裝以下元件:

    • Android SDK Platform, API 34.0.0
    • Android SDK Command-line Tools
    • Android SDK Build-Tools
    • Android SDK Platform-Tools
    • Android Emulator
  1. 啟動 Android Studio

  2. 開啟 Settings 對話框,檢視 SDK Manager

    1. 如果你已經開啟了一個專案,請開啟 Tools > SDK Manager

    2. 如果顯示 Welcome to Android Studio 的對話框,請單擊 Open 按鈕後面的 More Options 圖示,然後從下拉選單中單擊 SDK Manager

  3. 單擊 SDK Platforms

  4. 檢查 Android API 34.0.0 是否已經選中。

    如果 Status 欄顯示 Update availableNot installed

    1. 選擇 Android API 34.0.0

    2. 單擊 Apply

    3. 當顯示 Confirm Change 對話框時,單擊 OK

      顯示 SDK Quickfix Installation 完成進度的對話框。

    4. 安裝完成後,單擊 Finish

      安裝最新的 SDK 後, Status 欄可能會顯示 Update available。這意味著某些額外的系統映象可能尚未安裝。你可以忽略它然後繼續。

  5. 單擊 SDK Tools

  6. 檢查以下 SDK 工具是否已經選擇:

    • Android SDK Command-line Tools
    • Android SDK Build-Tools
    • Android SDK Platform-Tools
    • Android Emulator
  7. 如果上述任何工具的 Status 欄顯示 Update availableNot installed

    1. 選擇所需的工具。

    2. 單擊 Apply

    3. 當顯示 Confirm Change 的對話框時,單擊 OK

      顯示 SDK Quickfix Installation 完成進度的對話框。

    4. 安裝完成後,單擊 Finish

設定目標 Android 裝置

設定安卓模擬器

help 幫助

要設定 Flutter 應用在 Android 模擬器中執行,請按照以下步驟操作:

  1. 在你的開發電腦上啟用 VM acceleration

  2. 啟動 Android Studio

  3. 開啟 Settings 對話框,檢視 SDK Manager

    1. 如果你已經開啟了一個專案,請開啟 Tools > Device Manager

    2. 如果顯示 Welcome to Android Studio 的對話框,請單擊 Open 按鈕後面的 More Options 圖示,然後在下拉選單中單擊 Device Manager

  4. 單擊 Virtual

  5. 單擊 Create Device

    顯示 Virtual Device Configuration 的對話框。

  6. Category 下選擇 PhoneTablet

  7. 選擇裝置,你可以瀏覽或搜尋裝置。

  8. 單擊 Next

  9. Click x86 Images(Intel CPU 的 Mac)或者 ARM Images(Apple CPU 的 Mac).

    單擊 x86 Images(Intel CPU 的 Mac)或者 ARM Images(Apple CPU 的 Mac)。

  10. 單擊需要模擬的 Android 版本系統映象。

    1. 如果所需映象的 Release Name 右側有一個 Download 圖示,請單擊該圖標。

      顯示 SDK Quickfix Installation 完成進度的對話框

    2. 下載完成後,單擊 Finish

  11. 單擊 Next

    Virtual Device Configuration 會顯示它的 Verify Configuation 步驟。

  12. 如果要重新命名 Android 虛擬裝置 (AVD),請更改 AVD Name 框中的值。

  13. 單擊 Show Advanced Settings

  14. 捲動至 Emulated Performance

  15. Graphics 下拉選單中,選擇 Hardware - GLES 2.0

    這樣就會開啟 硬體加速 (hardware acceleration).

  16. 檢查你的 AVD 設定。如果已經完備,請單擊 Finish

    想要瞭解更多有關 AVD 的訊息,請查閱 Managing AVDs

  17. Device Manager 對話框中,單擊所需 AVD 右側的 Run 圖示。模擬器啟動並顯示所選作業系統的版本和裝置預設的畫布。

設定目標 Android 裝置

help 幫助

你需要一台執行 Android API level 21 或更高版本的安卓裝置,來設定 Flutter 應用在真機 Android 裝置上執行。

  1. 按照 Android 文件 中的說明,在裝置上啟用 開發者選項USB 除錯

  2. [可選] 如果要利用無線除錯,請按照 Android 文件 中的說明在裝置上啟用 無線除錯

  3. 將裝置插入你的 macOS 電腦。如果裝置發出提示,請授權電腦訪問你的裝置。

  4. 檢查 Flutter 是否能識別連線的 Android 裝置。

    在 Terminal 中執行:

    $ flutter devices
    

    預設情況下,Flutter 使用 adb 工具所在的 Android SDK 版本。如果要在 Flutter 中使用不同的 Android SDK 安裝路徑,請設定環境變數 ANDROID_SDK_ROOT 為該安裝目錄。

同意 Android 許可證

help 幫助

在使用 Flutter 之前,按照指南安裝所有必要的條件之後,再同意 Android SDK 平台的許可證。

  1. 開啟一個高許可權(管理員)的控制台視窗。

  2. 執行以下指令啟用簽名許可證。

    $ flutter doctor --android-licenses
    

    如果你在其他時候已經同意了 Android Studio 許可證,該指令將會回傳:

    [========================================] 100% Computing updates...
    All SDK package licenses accepted.
    

    你可以跳過下一個步驟。

  3. 請仔細閱讀每項許可條款後,再同意。

許可證問題故障排除

如何解決查詢 Java 安裝錯誤的問題

你可以遇到了 Android SDK 定位 Java SDK 的問題。

$ flutter doctor --android-licenses

ERROR: JAVA_HOME is set to an invalid directory: /Applications/Android\ Studio.app/Contents/jre/Contents/Home

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.

Android sdkmanager tool was found, but failed to run
(/Users/atsansone/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager): "exited code 1".
Try re-installing or updating your Android SDK,
visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.

這是由於環境變數 JAVA_HOME 設定方式導致的, flutter doctor 指令就會回傳此錯誤。當你在向 JAVA_HOME 新增路徑時,可以在 AndroidStudio 之間的空格處新增反斜槓,或者用引號將整個路徑包含進來。切記,不能 同時 這樣做。

在合適的 shell 資源檔案中查詢 JAVA_HOME 路徑。

將下面這樣:

export JAVA_HOME="/Applications/Android\ Studio.app/Contents/jre/Contents/Home"

改成:

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/Contents/Home"

不要在 AndroidStudio 之間加入反斜槓。

要載入當前更新後的環境變數,請重新載入 shell。本例使用 zsh 資源檔案。

source ~/.zshrc

檢查你的開發設定

help 幫助

執行 Flutter doctor

flutter doctor 指令將檢查 macOS 完整的 Flutter 開發環境的所有元件。

  1. Open 你的 Terminal.

    開啟你的 Terminal。

  2. 要檢查所有元件的安裝情況,請執行以下指令。

    $ flutter doctor
    

由於你選擇為 Android 進行開發,因此不需要 所有 元件。如果你遵循本指南,指令結果應該類似於:

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.0, on macOS A.B chipset, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Chrome - develop for the web
[!] Xcode - develop for iOS and macOS (Xcode not installed)
[✓] Android Studio (version 2023.1 (Hedgehog) or later)
[✓] VS Code (version 1.86)
[✓] Connected device (1 available)
[✓] Network resources

! Doctor found issues in 2 categories.

解決 Flutter doctor 的問題

flutter doctor 指令回傳錯誤時,可能是 Flutter、VS Code、Android Studio、連線的裝置或者網路資源出錯。

如果 flutter doctor 指令回傳這些元件中的任何一個錯誤,請使用 verbose 標誌再次執行。

$ flutter doctor -v

檢視輸出結果,瞭解可能需要安裝的其他軟體或者需要執行的其他任務。

如果你更改了 Flutter SDK 或其他相關元件的設定,請再次執行 flutter doctor 來檢查安裝。

管理 Flutter SDK

想要瞭解管理 Flutter SDK 安裝的更多訊息,請查閱以下內容。