使用 Flutter 建置 Web 應用程式

本頁將概述如何使用 Flutter 設定、執行及建置 Web 應用程式。

在你開始使用 Flutter 建置 Web 應用程式之前， 請確保已安裝 Flutter SDK 以及一個網頁瀏覽器。 詳細步驟請參考 Set up web development for Flutter 指南。

你可以建立一個新的 Flutter 專案，或是在現有專案中加入 Web 支援。

若要建立一個包含 Web 支援的新應用程式，請執行以下指令：

flutter create my_app

如果你已經有一個專案，請在你的專案目錄下執行 flutter create 指令：

flutter create . --platforms web

這會建立一個 web/ 目錄，內含用於啟動與執行你的 Flutter 應用程式的網頁資源。

請參閱以下章節以執行你的應用程式。

選擇 Chrome 作為你的應用程式目標裝置，以執行和除錯 Flutter Web 應用程式：

flutter run -d chrome

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

如果你願意，也可以在 Windows 上使用 edge 裝置類型， 或是使用 web-server 在你選擇的瀏覽器中導覽至本機 URL。

你可以傳遞 --wasm 旗標，以使用 WebAssembly 執行你的應用程式：

flutter run -d chrome --wasm

Flutter Web 提供多種建置模式與渲染器。
如需更多資訊，請參閱 Web renderers。

若要暫時停用 VS Code 的 hot reload 支援，
請在你的 launch.json file 檔案中加入
旗標 --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",
      ]
    }
  ]

如果你從命令列（Command Line Interface）使用 flutter run，可以透過以下指令暫時停用網頁端的熱重載（hot reload）：

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

DartPad 現已支援熱重載功能，並新增了「Reload」按鈕。 此功能僅在執行中的應用程式偵測到 Flutter 時才可用。 你可以透過選擇 DartPad 提供的範例應用程式，開始一個可進行熱重載的工作階段。

請參閱以下章節來建置你的應用程式。

執行以下指令以產生 release（發布）版本的建置檔案：

flutter build web

你也可以傳遞 --wasm 旗標，以使用 WebAssembly 來建置你的應用程式：

flutter build web --wasm

這會將建置後的檔案放入build/web目錄中， 其中包含assets目錄， 這些檔案需要一起提供服務。

如需瞭解如何將這些資源（Assets）部署到網頁，請參閱 建置與發布網頁應用程式。 其他常見問題的解答，請參閱 Web FAQ。

請使用 Flutter DevTools 來執行以下工作：

• 除錯（Debugging）
• 日誌紀錄（Logging）
• 執行 Flutter inspector

請使用 Chrome DevTools 來執行以下工作：

• 產生事件時間軸（Generating event timeline）
• 效能分析（Analyzing performance）—請務必使用 profile build

請使用 元件測試（widget tests） 或整合測試（integration tests）。如需瞭解 如何在瀏覽器中執行整合測試，請參閱 整合測試（Integration testing） 頁面。