目錄
description bug_report

開始在 Windows 上建立 Flutter web 應用

目錄

系統要求

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

硬體要求

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

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

軟體要求

要為 web 編寫和編譯 Flutter 程式碼，你必須安裝以下版本的 Windows 以及所列出的軟體套件。

作業系統

Flutter 支援 64-bit version of Microsoft Windows 10 或更高版本。這些版本的 Windows 必須包含 Windows PowerShell 5.0 或更高版本。

開發工具

下載並安裝以下軟體套件的 Windows 版本：

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

當你在當前版本執行 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)，按下快捷鍵 Control + 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 for Windows ，單擊該按鈕後會導向至 Flutter 安裝頁面。

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

下載 Flutter SDK

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

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

    請考慮 %USERPROFILE% 或 C:\dev 這樣的位置。

  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. 單擊 Add SDK to PATH。

    成功後會顯示通知：

    The Flutter SDK was added to your PATH

  5. VS Code 可能會顯示一則 Google Analytics 的通知。

    如果你同意，請單擊 OK。

  6. 在所有 PowerShell 視窗中啟用 flutter：

    1. 關閉，然後重新開啟所有 PowerShell 視窗。

    2. 重新啟動 VS Code。

下載並安裝 Flutter

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

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

    (獲取中…)

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

    Flutter SDK 應該會下載至 Windows 預設下載目錄： %USERPROFILE%\Downloads。

    如果你自行更改了下載目錄的位置，那麼請將之後步驟中解壓指令 (Expand-Archive) 的路徑 (-Path) 改為你更改後的路徑。如果你需要查詢當前電腦下載目錄的位置，請查閱 Microsoft Community post

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

    Consider creating a directory at %USERPROFILE% (C:\Users\{username}) 或者 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local).

    可以考慮在 %USERPROFILE% (C:\Users\{username}) 或者 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local) 中建立一個目錄。

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

    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 環境變數

help 幫助

將 Flutter 新增到 PATH 環境變數後，才能在 PowerShell 中執行 Flutter 指令。本節假定你在 %USERPROFILE%\dev\flutter 中安裝了 Flutter SDK。

  1. 按下快捷鍵 Windows + Pause。

    如果你的鍵盤上沒有 Pause 鍵，請嘗試 Windows + Fn + B。

    這將會顯示 系統 > 系統訊息 的視窗。

  2. 單擊 高階系統設定 > 高階 > 環境變數…

    這將會顯示 環境變數 的視窗。

  3. 在 username 使用者變數 的部分中，找到 Path 條目。

    1. 如果存在該條目，請雙擊它。

      這將會顯示 編輯環境變數 的視窗。

      1. 雙擊空白行。

      2. 輸入 %USERPROFILE%\dev\flutter\bin。

      3. 單擊選中 %USERPROFILE%\dev\flutter\bin 條目。

      4. 單擊 上移，直到 Flutter 條目位於清單頂部。

      5. 順著開啟的視窗依次點選 確認（三次）。

    2. 如果條目不存在，請單擊 新建…。

      這將會顯示 新建使用者變數 的視窗。

      1. 在 變數名 框中，輸入 Path。

      2. 在 變數值 框中，輸入 %USERPROFILE%\dev\flutter\bin。

      3. 順著開啟的視窗依次點選 確認（三次）。

  4. 為了啟用這些更改，請關閉並重新開啟任何現有指令提示符和 PowerShell 實例。

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

檢查你的開發設定

help 幫助

執行 Flutter doctor

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

  1. 開啟 PowerShell。

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

    C:\> flutter doctor

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

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.0, on Windows A.B chipset, locale en)
[✓] Windows version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Visual Studio - develop Windows apps
[!] 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 標誌再次執行。

C:\> flutter doctor -v

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

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

管理 Flutter SDK

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