目錄
description bug_report

開始在 macOS 上建立 Flutter web 應用

目錄

系統要求

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

硬體要求

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

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

軟體要求

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

作業系統

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

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

macOS 與大多數「類 UNIX」作業系統一樣， macOS 可以支援多種 shell，如 bash、zsh 和 sh。從 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

開發工具

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

  • Google Chrome 除錯 Web 應用的 JavaScript 程式碼。* 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 執行的是最新的預設 shell，zsh。 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 上為 web 開發 Flutter。

檢查你的開發設定

help 幫助

執行 Flutter doctor

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

  1. Open 你的 Terminal.

    開啟你的 Terminal。

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

    $ flutter doctor

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

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
[✓] Chrome - develop for the web
[!] Xcode - develop for iOS and macOS (Xcode not installed)
[!] Android Studio (not installed)
[✓] VS Code (version 1.86)
[✓] Connected device (1 available)
[✓] Network resources

! Doctor found issues in 4 categories.

解決 Flutter doctor 的問題

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

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

$ flutter doctor -v

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

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

管理 Flutter SDK

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