Contents

Web 常見問題

Contents

在 Web 平台使用 Flutter 的場景有哪些？

Flutter 目前並非適用於所有的網頁內容，不過我們主要關注三個應用場景：

  • 漸進式 web 應用 (Progressive web apps, PWA)，兼具 web 的高覆蓋面與桌面應用的強大功能。

  • 單頁應用 (Single page apps, SPA)，只需一次載入，並與網際網路服務動態互傳資料。

  • 將現有 Flutter 移動應用拓展到 web，在兩個平台共享程式碼。

現在階段，Flutter 不適合具有豐富文字和瀑布流的頁面。例如，部落格文章等基於流媒體的豐富文字內容，其受益於網路建構的以文件為中心的模式，而不是像 Flutter 這樣的 UI 框架可以提供的以應用為中心的服務。然而，你可以使用 Flutter 將互動式體驗嵌入到這些網站中。

有關如何在 Web 上使用 Flutter 的更多資訊，參考文件： Flutter 的 Web 支援。

Flutter Web 應用的 SEO 最佳化

一般情況下，Flutter Web 的目標是建構「動態化」網頁應用。 Flutter 的 Web 端支援會優先考慮和確保效能、保真度和一致性。這意味著產生的網頁頁面可能不是搜尋引擎「熟悉」的結構化頁面。對於一些網頁、文件內容，我們建議你使用 HTML 建構，就像我們為 Flutter 和 Dart 官網所做的那樣。你還應該考慮將主要的類應用體驗（使用 Flutter 建構的 Web 網頁）與首頁、營銷內容以及幫助內容等（使用搜索引擎「熟悉」的 HTML 建構）進行分離，避免將它們混在一起。

如何建立同時在 Web 上執行的應用？

請參見 使用 Flutter 建構 Web 應用。

我該如何在瀏覽器中重新整理正在執行的應用？

不能，但是可以使用熱重啟 (hot restart)。熱重啟是可以您的應用快速響應改動的方法，無需等待重新編譯的載入。它與移動端的熱重載功能類似。唯一的區別是熱重載可以保持應用的狀態。

我該如何在瀏覽器中重啟正在執行的應用？

使用瀏覽器的重新整理按鈕不會起作用，但你可以在執行 flutter run -d chrome 的控制檯中輸入「R」進行重新整理。

現在有哪些瀏覽器支援 Flutter 了？

現在 Flutter web 應用可以執行在以下瀏覽器中：

  • Chrome（移動和桌面端）

  • Safari（移動和桌面端）

  • Edge（移動和桌面端）

  • Firefox（移動和桌面端）

在開發階段，Chrome（在 macOS、Windows 以及 Linux）以及 Edge（在 Windows 上）將作為預設瀏覽器用於除錯。

我可以在任意 IDE 中，建構、執行併發布 web 應用嗎？

你可以在 Android Studio/IntelliJ 和 VS Code 裡選擇使用 Chrome 或者 Edge 瀏覽器。

裝置下拉列表裡現在應該在所有平台裡都包含了 Chrome (web)。

我該如何建構響應式 web 應用？

請參閱 建立響應式應用。

我能在 Web 應用中使用 dart:io 這個 package 嗎？

不行。檔案系統在瀏覽器中是無法存取的。對於網路功能來說，請使用 http package。請注意，安全方面的工作有所不同，因為瀏覽器（而不是應用程式）控制 HTTP 請求上的標頭。

我應該如何處理一個 Web 平台特定的匯入？

部分外掛需要在特定平台匯入庫或者檔案，尤其是當使用瀏覽器無法存取的檔案系統時。若要在你的應用裡使用這些外掛，請參閱 dart.tw.gh.miniasp.com： 選擇性的匯入。

Flutter Web 是否支援併發？

Dart 透過 isolates 機制實現併發，目前在 Web 中尚未支援。

Flutter Web 沒有內建併發的支援，但你可以嘗試透過 web workers 來解決這個問題。

我該如何把一個 Flutter web 應用嵌入到一個網頁中？

你可以透過下面這個例子，以 iframe 來內嵌，把 URL 替換成託管 Flutter Web 的頁面 URL：

<iframe src="URL"></iframe>

如果你遇到問題，請 提交一個 issue 給我們。

我該如何除錯一個 web 應用？

使用 Flutter DevTools 來嘗試如下工作：

使用 Chrome DevTools 來嘗試如下工作：

我該如何測試 Web 應用？

使用常規的 widget tests，瞭解更多關於如何在瀏覽器裡使用整合測試，請檢視 整合測試 文件頁面。

我該如何部署 Web 應用？

請參閱 打包併發布到 Web 平台。

Platform.is API 現在可用嗎？

目前還不行。