使用 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 中的熱過載支援，請使用 --no-web-experimental-hot-reload 標誌更新您的 launch.json 檔案。

"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 也透過新增的“Reload”（過載）按鈕支援熱過載。該功能僅在執行的應用中檢測到 Flutter 時才可用。您可以透過選擇 DartPad 提供的示例應用來開始熱過載會話。

檢視以下章節以構建您的應用。

執行以下命令以生成釋出構建

$ flutter build web

您也可以傳入 --wasm 標誌以使用 WebAssembly 構建應用

$ flutter build web --wasm

這會在 build/web 目錄中生成構建檔案（包括 assets 目錄），這些檔案需要一起部署。

要了解有關如何將這些資源部署到 Web 的更多資訊，請訪問構建併發布 Web 應用。有關其他常見問題的解答，請訪問 Web 常見問題解答。

使用 Flutter DevTools 執行以下任務

• 除錯
• 日誌記錄
• 執行 Flutter 檢查器 (Inspector)

使用 Chrome DevTools 執行以下任務

• 生成事件時間軸
• 分析效能——確保使用 Profile 構建

使用 元件測試或整合測試。要了解有關在瀏覽器中執行整合測試的更多資訊，請檢視整合測試頁面。