使用 Flutter 構建 Web 應用程式

本頁概述瞭如何使用 Flutter 配置、執行和構建 Web 應用程式。

在開始使用 Flutter 構建 Web 應用程式之前，請確保您已安裝 Flutter SDK 和 Web 瀏覽器。有關詳細資訊，請參閱 設定 Flutter 的 Web 開發 指南。

要設定您的專案，您可以建立一個新的 Flutter 專案或為現有專案新增 Web 支援。

要建立一個包含 Web 支援的新應用，請執行以下命令

flutter create my_app

如果您已有專案，請在專案目錄中執行 flutter create 命令

flutter create . --platforms web

這將建立一個 web/ 目錄，其中包含用於引導和執行您的 Flutter 應用的 Web 資源。

有關執行應用的資訊，請參閱以下部分。

選擇 Chrome 作為您應用的目標裝置，以執行和除錯 Flutter Web 應用。

flutter run -d chrome

您也可以在 IDE 中選擇 Chrome 作為目標裝置。

如果您願意，可以在 Windows 上使用 edge 裝置型別，或使用 web-server 在您選擇的瀏覽器中導航到本地 URL。

您可以傳遞 --wasm 標誌以使用 WebAssembly 執行您的應用。

flutter run -d chrome --wasm

Flutter Web 提供多種構建模式和渲染器。有關更多資訊，請參閱 Web 渲染器。

要暫時停用 VS Code 中的熱過載支援，請在您的 launch.json 檔案 中新增 --no-web-experimental-hot-reload 標誌。

"configurations": [
    ...
    {
      "name": "Flutter for web (hot reload disabled)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome",
        "--no-web-experimental-hot-reload",
      ]
    }
  ]

如果您從命令列使用 flutter run，可以使用以下命令暫時停用 Web 上的熱過載：

flutter run -d chrome --no-web-experimental-hot-reload

DartPad 也啟用了熱過載功能，並新增了一個“重新載入”按鈕。該功能僅在檢測到執行的應用程式中有 Flutter 時才可用。您可以透過選擇 DartPad 提供的示例應用來開始一個可熱過載的會話。

有關構建應用的資訊，請參閱以下部分。

執行以下命令以生成釋出版本：

flutter build web

您還可以傳遞 --wasm 標誌以使用 WebAssembly 構建您的應用。

flutter build web --wasm

這會在 build/web 目錄中填充構建檔案，包括一個 assets 目錄，這些檔案需要一起提供。

要了解有關如何將這些資產部署到 Web 的更多資訊，請參閱 構建和釋出 Web 應用。有關其他常見問題的解答，請參閱 Web FAQ。

使用 Flutter DevTools 執行以下任務：

• 除錯
• 日誌記錄
• 執行 Flutter Inspector

使用 Chrome DevTools 執行以下任務：

• 生成事件時間線
• 分析效能 — 確保使用 profile 構建。

使用 widget 測試 或整合測試。有關在瀏覽器中執行整合測試的更多資訊，請參閱 整合測試 頁面。