跳至主要內容

開始在 Windows 上建置 Flutter 原生桌面應用程式

驗證系統需求

#

若要安裝和執行 Flutter,您的 Windows 環境必須符合以下硬體和軟體需求。

硬體需求

#

您的 Windows Flutter 開發環境必須符合以下最低硬體需求。

需求最低建議
x86_64 CPU 核心48
記憶體 (GB)816
顯示器解析度 (像素)WXGA (1366 x 768)FHD (1920 x 1080)
可用磁碟空間 (GB)4.052.0

軟體需求

#

若要撰寫和編譯用於桌面的 Flutter 程式碼,您必須具有以下 Windows 版本和列出的軟體套件。

作業系統

#

Flutter 支援 Microsoft Windows 10 或更新版本的 64 位元版本。這些 Windows 版本應包含所需的 Windows PowerShell 5 或更新版本。

開發工具

#

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

  • 適用於 Windows 的 Git 2.27 或更新版本,以管理原始碼。

  • Visual Studio 2022,以偵錯和編譯原生 C++ Windows 程式碼。請務必安裝 使用 C++ 的桌面開發 工作負載。這可啟用建置 Windows 應用程式,包括其所有預設元件。Visual Studio 是一個與 Visual Studio Code 分開的 IDE。

上述軟體的開發人員為這些產品提供支援。若要疑難排解安裝問題,請參閱該產品的文件。

當您執行目前版本的 flutter doctor 時,它可能會列出其中一個套件的不同版本。如果這樣,請安裝它建議的版本。

設定文字編輯器或 IDE

#

您可以使用任何文字編輯器或整合開發環境 (IDE) 結合 Flutter 的命令列工具,來建置 Flutter 應用程式。

使用具有 Flutter 擴充功能或外掛程式的 IDE 可提供程式碼完成、語法醒目提示、小工具編輯輔助、偵錯和其他功能。

熱門選項包括

安裝 Flutter SDK

#

若要安裝 Flutter SDK,您可以使用 VS Code Flutter 擴充功能,或自行下載並安裝 Flutter 套件。

使用 VS Code 安裝 Flutter

#

若要使用這些指示安裝 Flutter,請確認您已安裝 Visual Studio Code 1.77 或更新版本,以及 適用於 VS Code 的 Flutter 擴充功能

提示 VS Code 安裝 Flutter

#
  1. 啟動 VS Code。

  2. 若要開啟 命令面板,請按 Ctrl + Shift + P

  3. 命令面板 中,輸入 flutter

  4. 選取 Flutter:新增專案

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

    1. 如果已安裝 Flutter SDK,請按一下 尋找 SDK

    2. 如果未安裝 Flutter SDK,請按一下 下載 SDK

      如果您尚未依照開發工具必要條件中的指示安裝適用於 Windows 的 Git,此選項會將您傳送到 Flutter 安裝頁面。

  6. 當提示 您要使用哪個 Flutter 範本?時,請忽略它。按 Esc。您可以在檢查開發設定後建立測試專案。

下載 Flutter SDK

#
  1. 當顯示 選取 Flutter SDK 的資料夾 對話方塊時,請選擇您要安裝 Flutter 的位置。

    VS Code 會將您置於您的使用者設定檔中以開始。請選擇不同的位置。

    請考慮 %USERPROFILE%C:\dev

  2. 按一下 複製 Flutter

    下載 Flutter 時,VS Code 會顯示此快顯通知

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

    此下載需要幾分鐘。如果您懷疑下載已停滯,請按一下 取消,然後重新開始安裝。

  3. 下載完成 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?
  4. 按一下 將 SDK 新增至 PATH

    成功時,會顯示通知

    The Flutter SDK was added to your PATH
  5. VS Code 可能會顯示 Google Analytics 通知。

    如果您同意,請按一下 確定

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

    1. 關閉,然後重新開啟所有 PowerShell 視窗。
    2. 重新啟動 VS Code。

下載然後安裝 Flutter

#

若要安裝 Flutter,請從其封存下載 Flutter SDK 套件,將套件移至您要儲存的位置,然後解壓縮 SDK。

  1. 下載以下安裝套件以取得 Flutter SDK 的最新穩定版本。

    (載入中...)

    如需其他發行通道和舊版組建,請查看 SDK 封存

    Flutter SDK 應下載到 Windows 預設下載目錄:%USERPROFILE%\Downloads

    如果您變更了下載目錄的位置,請將此路徑取代為該路徑。若要尋找您的下載目錄位置,請查看此 Microsoft Community 貼文

  2. 建立一個資料夾,您可以在其中安裝 Flutter。

    請考慮在 %USERPROFILE% (C:\Users\{username}) 或 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local) 建立目錄。

  3. 將檔案解壓縮到您要儲存 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 變數

#

help 說明

若要在 PowerShell 中執行 Flutter 命令,請將 Flutter 新增至 PATH 環境變數。本節假設您已在 %USERPROFILE%\dev\flutter 中安裝 Flutter SDK。

  1. Windows + Pause

    如果您的鍵盤沒有 Pause 鍵,請嘗試 Windows + Fn + B

    會顯示 系統 > 關於 對話方塊。

  2. 按一下 進階系統設定 > 進階 > 環境變數...

    會顯示 環境變數 對話方塊。

  3. (使用者名稱) 的使用者變數 區段中,尋找 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 執行個體。

檢查您的開發設定

#

help 說明

執行 Flutter Doctor

#

flutter doctor 命令會驗證 Windows 完整 Flutter 開發環境的所有元件。

  1. 開啟 PowerShell。

  2. 若要驗證所有元件的安裝,請執行以下命令。

    PS C:> flutter doctor

由於您選擇為桌面開發,因此您不需要所有元件。如果您遵循本指南,您的命令結果應類似於

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on Microsoft Windows 11 [Version 10.0.22621.3155], 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 (version 2022)
[!] 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、Visual Studio、連接的裝置或網路資源而發生錯誤。

如果 flutter doctor 命令針對任何這些元件傳回錯誤,請使用詳細資訊旗標再次執行它。

PS C:> flutter doctor -v

檢查輸出中您可能需要安裝的其他軟體或要執行的其他工作。

如果您變更 Flutter SDK 或其相關元件的組態,請再次執行 flutter doctor 來驗證安裝。

開始使用 Flutter 開發 Windows 桌面應用程式

#

恭喜。 已安裝所有必要條件和 Flutter SDK,您就可以開始為 Windows 桌面開發 Flutter 應用程式。

若要繼續您的學習旅程,請參閱以下指南

管理您的 Flutter SDK

#

要了解更多關於管理您的 Flutter SDK 安裝,請參考以下資源。