開始在 macOS 上建置 Flutter 網頁應用程式
驗證系統需求
#若要安裝並執行 Flutter，您的 macOS 環境必須符合以下硬體和軟體需求。
硬體需求
#您的 macOS Flutter 開發環境必須符合以下最低硬體需求。
| 需求 | 最低 | 建議 |
|---|---|---|
| CPU 核心 | 4 | 8 |
| 記憶體 (GB) | 8 | 16 |
| 顯示解析度 (像素) | WXGA (1366 x 768) | FHD (1920 x 1080) |
| 可用磁碟空間 (GB) | 2.5 | 2.5 |
軟體需求
#若要撰寫和編譯用於網頁的 Flutter 程式碼，請安裝下列套件。
作業系統
#Flutter 支援在 macOS 11 (Big Sur) 或更新版本上進行開發。本指南假設您的 Mac 預設使用 zsh 作為您的 shell。
若要驗證您的 shell 設定，請展開此區段
如同大多數類 UNIX 作業系統，macOS 可以支援多個 shell，例如 bash、zsh 和 sh。自 2019 年 10 月發布 macOS Catalina (macOS 10.15) 起，Zsh 或 zsh 已成為 macOS 的預設 shell。
檢查並設定 zsh 為預設
#若要驗證
zsh是否已設定為預設 macOS shell，請執行目錄服務命令列公用程式。dscl . -read ~/ UserShell該命令應輸出以下回應。
UserShell: /bin/zsh您可以跳過剩餘的步驟。
如果您需要安裝
zsh，請依照此 Wiki中的步驟進行。如果您需要將預設 shell 變更為
zsh，請執行chsh命令。chsh -s `which zsh`
若要深入瞭解 macOS 和 zsh，請查閱 macOS 文件中的在 Mac 上將 zsh 作為預設 shell。
某些 Flutter 組件需要在執行Apple silicon的 Mac 上使用Rosetta 2 轉譯程序。若要在 Apple silicon 上執行所有 Flutter 組件，請安裝 Rosetta 2。
sudo softwareupdate --install-rosetta --agree-to-license開發工具
#下載並安裝下列套件。
- Google Chrome 用於偵錯網頁應用程式的 JavaScript 程式碼。
- Git 2.27 或更新版本，用於管理原始碼。若要檢查您是否已安裝
git，請在您的終端機中輸入git version。如果您需要安裝git，請輸入brew install git。
上述軟體的開發人員會為這些產品提供支援。若要疑難排解安裝問題，請查閱該產品的文件。
當您執行目前版本的 flutter doctor 時，它可能會列出其中一個套件的不同版本。如果有的話，請安裝它建議的版本。
文字編輯器或整合開發環境
#您可以使用任何文字編輯器或整合開發環境 (IDE) 搭配 Flutter 的命令列工具來建立 Flutter 應用程式。
使用具有 Flutter 擴充功能或外掛程式的 IDE，可提供程式碼完成、語法醒目提示、widget 編輯輔助、偵錯和其他功能。
常見的選項包括
- Visual Studio Code 1.77 或更新版本，搭配VS Code 的 Flutter 擴充功能。
- Android Studio 2023.3.1 (Jellyfish) 或更新版本，搭配IntelliJ 的 Flutter 外掛程式。
- IntelliJ IDEA 2023.3 或更新版本，同時搭配IntelliJ 的 Flutter 外掛程式和IntelliJ 的 Android 外掛程式。
安裝 Flutter SDK
#若要安裝 Flutter SDK，您可以使用 VS Code Flutter 擴充功能，或自行下載並安裝 Flutter 套件。
使用 VS Code 安裝 Flutter
#若要使用這些指示安裝 Flutter，請驗證您已安裝Visual Studio Code 1.77 或更新版本和VS Code 的 Flutter 擴充功能。
提示 VS Code 安裝 Flutter
#啟動 VS Code。
若要開啟 命令面板，請按 Command + Shift + P。
在命令面板中，輸入
flutter。選取 Flutter：新專案。
VS Code 會提示您在電腦上找到 Flutter SDK。
如果您已安裝 Flutter SDK，請按一下 尋找 SDK。
如果您尚未安裝 Flutter SDK，請按一下 下載 SDK。
如果您未依照開發工具先決條件中的指示安裝 Git，此選項會將您導向 Flutter 安裝頁面。
當系統提示 您要使用哪個 Flutter 範本？時，請忽略它。按 Esc。您可以在檢查開發設定後建立測試專案。
下載 Flutter SDK
#當顯示 選取 Flutter SDK 的資料夾對話方塊時，請選擇您要安裝 Flutter 的位置。
VS Code 會將您放置在您的使用者設定檔中以開始。請選擇其他位置。
考慮使用
~/development/按一下 Clone Flutter。
下載 Flutter 時，VS Code 會顯示此快顯通知
Downloading the Flutter SDK. This may take a few minutes.此下載需要幾分鐘的時間。如果您懷疑下載已停止，請按一下 取消，然後重新開始安裝。
下載完 Flutter 後，會顯示 輸出面板。
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.在初始化時，輸出面板會顯示以下內容
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?VS Code 可能會顯示 Google Analytics 通知。
如果您同意，請按一下 確定。
若要在所有終端機視窗中啟用
flutter- 關閉，然後重新開啟所有終端機視窗。
- 重新啟動 VS Code。
下載然後安裝 Flutter
#若要安裝 Flutter，請從其封存下載 Flutter SDK 套件，將套件移動到您想要儲存的位置，然後解壓縮 SDK。
下載下列安裝套件，以取得最新穩定版本的 Flutter SDK。
若要取得其他發行管道和較舊的版本，請查看SDK 封存。
Flutter SDK 應該會下載到 macOS 的預設下載目錄：
~/Downloads/。建立一個可以安裝 Flutter 的資料夾。
考慮在
~/development/建立目錄。將檔案解壓縮到您想要儲存 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 檔案來設定環境變數。
啟動您偏好的文字編輯器。
如果存在，請在您的文字編輯器中開啟 Zsh 環境變數檔案
~/.zshenv。如果不存在，請建立~/.zshenv。複製下列程式碼行，並將其貼到
~/.zshenv檔案的末尾。bashexport PATH=$HOME/development/flutter/bin:$PATH儲存您的
~/.zshenv檔案。若要套用此變更，請重新啟動所有已開啟的終端機工作階段。
如果您使用其他 shell，請查看此關於設定 PATH 的教學課程。
檢查您的開發設定
#執行 Flutter doctor
#flutter doctor 命令會驗證 macOS 完整 Flutter 開發環境的所有組件。
開啟您的終端機。
若要驗證您所有組件的安裝，請執行下列命令。
flutter doctor
由於您選擇開發網頁，您不需要所有組件。如果您遵循本指南，您的命令結果應類似於
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 14.4.0 23E214 darwin-arm64, 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.95)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 3 categories.疑難排解 Flutter doctor 問題
#當 flutter doctor 命令傳回錯誤時，可能是 Flutter、VS Code、連接的裝置或網路資源的問題。
如果 flutter doctor 命令針對這些組件中的任何一個傳回錯誤，請使用詳細標記重新執行它。
flutter doctor -v檢查輸出中您可能需要安裝的其他軟體或要執行的其他任務。
如果您變更了 Flutter SDK 或其相關組件的設定，請再次執行 flutter doctor 以驗證安裝。
開始使用 Flutter 在 macOS 上開發網頁應用程式
#恭喜。 安裝完所有先決條件和 Flutter SDK 後，您就可以開始在 macOS 上開發用於網頁的 Flutter 應用程式。
若要繼續您的學習旅程，請查閱以下指南
管理您的 Flutter SDK
#若要深入瞭解如何管理您的 Flutter SDK 安裝，請查閱以下資源。
除非另有說明，否則本網站上的文件反映了最新穩定版本的 Flutter。頁面最後更新於 2024-10-28。 檢視原始碼 或 回報問題。