使用 Flutter 構建 Web 應用程式

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

在你可以使用 Flutter 構建 Web 應用程式之前，請確保你已安裝 Flutter SDK 和 Web 瀏覽器。有關詳細資訊，請參閱 設定 Flutter Web 開發 說明。

要設定你的專案，你可以建立一個包含 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 中啟用，並帶有新的“重新載入”按鈕。只有在 DartPad 執行的應用中檢測到 Flutter 時，此功能才可用。你可以透過選擇 DartPad 提供的示例應用來開始一個可熱過載的會話。

請參閱以下部分以構建你的應用。

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

$ flutter build web

你也可以傳遞 --wasm 標誌來使用 WebAssembly 構建你的應用

$ flutter build web --wasm

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

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

使用 Flutter DevTools 執行以下任務

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

使用 Chrome DevTools 執行以下任務

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

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