在 Windows 上開始構建 Flutter Web 應用
軟體要求
#要編寫和編譯適用於 Web 的 Flutter 程式碼,您必須擁有以下版本的 Windows 和列出的軟體包。
作業系統
#Flutter 支援在 64 位 Windows 10 和 11 上進行開發。
開發工具
#下載並安裝以下軟體包的 Windows 版本
Git for Windows 用於管理 Flutter 版本和你的原始碼版本。
Google Chrome 用於除錯 Web 應用的 JavaScript 程式碼。
上述軟體的開發者提供這些產品的支援。要解決安裝問題,請查閱該產品的文件。
配置文字編輯器或 IDE
#你可以使用任何文字編輯器或整合開發環境 (IDE) 結合 Flutter 的命令列工具來構建應用。
使用帶有 Flutter 擴充套件或外掛的 IDE 可提供程式碼補全、語法高亮、小部件編輯輔助、除錯及其他功能。
流行的選項包括
- Visual Studio Code 以及適用於 VS Code 的 Flutter 擴充套件。
- 安裝包含 IntelliJ 版 Flutter 外掛的 Android Studio。
- IntelliJ IDEA 以及適用於 IntelliJ 的 Flutter 外掛。
安裝 Flutter SDK
#要安裝 Flutter SDK,你可以使用 VS Code Flutter 擴充套件,或自行下載並安裝 Flutter 包。
使用 VS Code 安裝 Flutter
#要按照這些說明安裝 Flutter,請驗證您已安裝 Visual Studio Code 和 VS Code 的 Flutter 擴充套件。
提示 VS Code 安裝 Flutter
#啟動 VS Code。
要開啟命令面板,請按 Control + Shift + P。
在命令面板中,輸入
flutter。選擇Flutter: 新建專案。
VS Code 會提示你定位電腦上的 Flutter SDK。
如果你已安裝 Flutter SDK,請點選定位 SDK。
如果你未安裝 Flutter SDK,請點選下載 SDK。
如果你尚未按照開發工具先決條件中的指示安裝 Git for Windows,此選項會帶你到 Flutter 安裝頁面。
當提示哪個 Flutter 模板?時,請忽略。按 Esc。你可以在檢查開發環境設定後建立一個測試專案。
下載 Flutter SDK
#當顯示選擇 Flutter SDK 資料夾對話方塊時,選擇你想要安裝 Flutter 的位置。
VS Code 會首先將你定位到使用者配置檔案目錄。請選擇其他位置。
可以考慮
%USERPROFILE%或C:\dev。點選克隆 Flutter。
下載 Flutter 時,VS Code 會顯示以下彈窗通知:
Downloading the Flutter SDK. This may take a few minutes.Initializing the Flutter SDK. This may take a few minutes.下載和安裝需要幾分鐘。如果你懷疑下載已卡住,請點選取消,然後重新開始安裝。
Flutter 安裝成功後,VS Code 會顯示此彈窗通知:
Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?點選新增 SDK 到 PATH。
成功時,會顯示通知
The Flutter SDK was added to your PATHVS Code 可能會顯示 Google Analytics 通知。
如果你同意,點選確定。
要在所有 PowerShell 視窗中啟用
flutter- 關閉,然後重新開啟所有 PowerShell 視窗。
- 重新啟動 VS Code。
下載然後安裝 Flutter
#要安裝 Flutter,請從其存檔下載 Flutter SDK 包,將該包移動到你希望儲存的位置,然後解壓 SDK。
下載以下安裝包以獲取 Flutter SDK 的最新穩定版本。
對於其他釋出渠道和舊版本,請查閱 SDK 存檔。
Flutter SDK 應該下載到 Windows 預設的下載目錄:
%USERPROFILE%\Downloads。如果您更改了 Downloads 目錄的位置,請將此路徑替換為您更改後的路徑。要查詢您的 Downloads 目錄位置,請檢視此 Microsoft Community 帖子。
建立一個你可以安裝 Flutter 的資料夾。
可以考慮在
%USERPROFILE%(C:\Users\{username}) 或%LOCALAPPDATA%(C:\Users\{username}\AppData\Local) 建立目錄。將檔案解壓到你希望儲存 Flutter SDK 的目錄中。
PS C:\> Expand-Archive ` -Path $env:USERPROFILE\Downloads\flutter_sdk_v1.0.0.zip ` -Destination $env:USERPROFILE\dev\完成後,Flutter SDK 應該位於
C:\user\{username}\dev\flutter目錄中。
更新你的 Windows PATH 變數
#要在 PowerShell 中執行 Flutter 命令,請將 Flutter 新增到 PATH 環境變數。本節假定你已將 Flutter SDK 安裝在 %USERPROFILE%\dev\flutter 中。
按下 Windows + Pause。
如果您的鍵盤沒有 Pause 鍵,請嘗試 Windows + Fn + B。
顯示系統 > 關於對話方塊。
點選高階系統設定 > 高階 > 環境變數...
顯示環境變數對話方塊。
在使用者變數 (username) 部分,查詢Path條目。
如果條目存在,雙擊它。
顯示編輯環境變數對話方塊。
雙擊一個空白行。
輸入
%USERPROFILE%\dev\flutter\bin。點選%USERPROFILE%\dev\flutter\bin條目。
點選上移,直到 Flutter 條目位於列表頂部。
點選三次確定。
如果該條目不存在,請點選新建...。
顯示編輯環境變數對話方塊。
在“變數名”框中,輸入
Path。在變數值框中,輸入
%USERPROFILE%\dev\flutter\bin點選三次確定。
要使這些更改生效,請關閉並重新開啟所有現有命令提示符和 PowerShell 例項。
檢查開發環境設定
#執行 Flutter doctor
#flutter doctor 命令會驗證 Windows 上完整的 Flutter 開發環境的所有元件。
開啟 PowerShell。
要驗證所有元件的安裝,請執行以下命令。
PS C:> flutter doctor
由於您選擇為 Web 開發,因此您不需要所有元件。如果您遵循本指南,該命令應輸出 [✓] 表示您已設定的工具和平臺。
Flutter doctor 問題排查
#當 flutter doctor 命令返回錯誤時,可能是 Flutter、VS Code、Visual Studio、已連線的裝置或網路資源出現了問題。
如果 flutter doctor 命令針對這些元件中的任何一個返回錯誤,請使用詳細模式標誌再次執行它。
PS C:> flutter doctor -v檢查輸出,看是否需要安裝其他軟體或執行其他任務。
如果你更改了 Flutter SDK 或其相關元件的配置,請再次執行 flutter doctor 來驗證安裝。
開始使用 Flutter 在 Windows 上開發 Web 應用
#恭喜。 在安裝了所有先決條件和 Flutter SDK 後,您就可以在 Windows 上開始為 Web 開發 Flutter 應用了。
要繼續你的學習之旅,請查閱以下指南:
管理 Flutter SDK
#要了解更多關於管理 Flutter SDK 安裝的資訊,請查閱以下資源: