建立 Flutter Web 應用

本頁面將透過幾個步驟讓你開啟 Web 平台的支援：

• 設定 flutter 工具開啟 Web 支援。

• 建立支援 Web 的新專案。

• 執行支援 Web 的新專案。

• 建立支援 Web 的新專案。

• 為現有專案新增 Web 支援。

要求

要建立支援 Web 平台的 Flutter 應用，你需要以下這些軟體內容：

• Flutter SDK。檢視 Flutter SDK 安裝指導。

• Chrome：用於除錯 Web 應用。

• 可選：用於 Flutter 開發的 IDE。你可以安裝 Android Studio、IntelliJ IDEA 或者 Visual Studio Code，並且 安裝 Flutter 和 Dart 外掛 以啟用語言支援、用於執行/除錯/重構的開發工具，以及在 IDE 中過載你的 Web 應用。檢視 編輯工具設定 瞭解更多。

更多內容請閱讀 Web 平台常見問題。

建立支援 Web 的新專案

你可以依照以下步驟建立支援 Web 的新專案。

準備工作

執行以下指令以使用最新版本的 Flutter SDK：

$ flutter channel stable
$ flutter upgrade

如果 Chrome 已經安裝，flutter devices 指令會輸出一個 Chrome 裝置，在執行應用時會使用它啟動應用；以及一個將應用提供在指定 URL 的 Web Server。

$ flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

在你的 IDE 中，你可以在裝置下拉清單中看到 Chrome (web)。

建立並執行

建立支援 Web 的新專案的步驟與 開發體驗初探 中建立其他平台應用的步驟相差無幾。

編輯器 (IDE)

在 IDE 中建立新應用時，會自動包含 iOS、Android 和 Web 支援。（如果你啟用了 桌面平台支援，也會一併支援。）在裝置下拉清單裡，選擇 Chrome (web) 執行你的應用，它會在 Chrome 中啟動。

指令行

執行以下指令建立支援 Web 平台的應用（包括行動端），你可以調整 myapp 為你的專案名稱：

$ flutter create my_app
$ cd my_app

想要使用 Chrome 在 localhost 訪問到你的應用，在應用的根目錄執行以下指令：

$ flutter run -d chrome

flutter run 指令會在 Chrome 中使用 開發編譯器。

建立

執行以下指令生成 release 版本的建立：

$ flutter build web

發布版本的建立會使用 dart2js （而不是 開發編譯器）來生成單獨的 main.dart.js 檔案。你可以透過執行 release 模式 (flutter run --release) 或執行 flutter build web 來建立 release 模式的應用。它們會在 build/web 目錄下生成建立的檔案，包括需要一併提供的 assets 資料夾。

同時，你可以使用 --web-renderer html 或者 --web-renderer canvaskit 分別切換 HTML 或 CanvasKit 渲染器。想要瞭解更多訊息，你可以閱讀 Web 渲染器。

想要瞭解更多 Web 建立的內容，你可以閱讀 建立和發布為 Web 應用。

為現有專案新增 Web 支援

要為現有的專案新增 Web 支援，請在專案的根目錄下執行：

$ flutter create --platforms web .