作者：Brian De Sousa
翻譯：瘋狂的技術宅
原文：blog.logrocket.com/flutter-web…
未經允許嚴禁轉載
大量的跨平臺應用開發框架，使你可以編寫一次程式碼，然後在 Android，iOS 等多個平臺上甚至在桌上型電腦上執行。你可能聽說過一些流行的框架，例如 Ionic，Xamarin 和 React Native。另一個相對較新的框架是 Flutter。
在本文中，你將學到一些有關 Flutter 的知識，特別是對 Web 的支援，該支援最近在 v1.9 版中可作為技術預覽版本使用。你將可以向現有的 Flutter 程式中新增 Web 支援，並將其與簡單的 API 一起在 Node.js 伺服器上執行。
Flutter 簡述
Flutter 是 Google 跨平臺開發解決方案之一。雖然它出現的時間不是很長，但其功能集使其成為該領域的強大的競爭對手。
它將你的程式編譯為可在 iOS 或 Android 上執行的原生程式碼，從而獲得令人難以置信的效能和幀率。它支援在開發期間進行有狀態的熱重啟，這意味著你可以隨時對程式碼進行更改，並觀看它們在模擬器或物理裝置上的應用，而無需重新啟動程式或丟失程式狀態。
Flutter 主要關注 iOS 和 Android。在 1.9 版中已將 Web 支援新增為技術預覽。它仍處於起步階段，可能尚未準備就緒，但肯定令人興奮且充滿希望。正如你將很快看到的那樣，只需進行一點的修改即可使用現有的 Flutter 應用並將其編譯為 HTML、CSS 和 JS 包。
為什麼在 Node.js 上執行 Flutter Web 程式？
Flutter Web 應用可以在任何 Web 伺服器上執行。那麼為什麼要在 Node.js 伺服器上託管 Flutter Web 程式呢？好吧，老實說，出於與其他 Web 應用和 API 選擇 Node.js 的相同原因：它非常擅於服務大量的簡單請求，你可以用 JavaScript 在其中編寫前端和後端程式碼等。
你可能已經有了一個 Node.js API，可將資料提供給 Flutter iOS 或 Android 程式。將 Flutter 程式編譯為 Web 應用並將其託管在現有的 Node.js 伺服器上可能是當前解決方案的邏輯擴充套件，而無需增加額外的託管成本。
示範
現在該深入研究程式碼，看看 Flutter web 的實際應用了。你需要以下工具：
- Android Studio（Android SDK 管理器和模擬器）
- Visual Studio Code + Flutter 擴充套件（或 Android Studio）
- Node.js 12
Flutter 有出色的開發人員文件。如果這是你第一次開發 Flutter 程式，請按照“入門”指南進行設定。
本文中的示例和說明基於 Visual Studio Code，但如果你選擇使用 Android Studio，則仍然可以繼續學習。
需要 Node.js 12 才能執行 Flutter Weather 程式的 Web 版本以及後端 Weather API。
步驟1：探索示例程式碼
為了演示如何向現有的 Flutter 應用新增 Web 支援，我們將從一個簡單的氣象應用開始，該應用已在 Android 10（API level 29）上進行了測試。
weather app 允許使用者檢視預定義城市的當前天氣。天氣資料是從執行在 Node.js 上的後端伺服器中檢索的。
從 GitHub 複製 weather app 和伺服器的原始碼：
提示：
weather-app-nodejs-server專案庫有一個Flutter-web-support分支，其中包含已啟用 Flutter Web 支援的可在伺服器執行的完整版本。
最好將兩個專案的儲存庫克隆到同一個父資料夾中。將建立 weather_app_flutter 儲存庫的內容並將其複製到 weather-app-nodejs-server 儲存庫內的資料夾中。
探索 Flutter 天氣應用
在編輯器中開啟 weather_app_flutter 。讓我們仔細看看 main.dart 檔案。它包含構成程式使用者介面的腳手架和小部件。 Home 視窗小部件類具有 fetchWeatherData 函式，該函式呼叫後端天氣 API 來檢索資料並更新視窗小部件的狀態：
fetchWeatherData({String location}) async {
var url = WEATHER_API_URL + location;
final response = await http.get(url);
if (response.statusCode == 200) {
var jsonResponse = convert.jsonDecode(response.body);
setState(() {
this._weatherData = WeatherData(
jsonResponse\['weather'\]['location'],
jsonResponse\['weather'\]['temperature'],
jsonResponse\['weather'\]['weatherDescription'],
);
this._apiError = null;
});
} else {
setState(() {
this._apiError =
'Unable to retrieve weather data from API (HTTP ${response.statusCode})';
});
}
}
複製程式碼fetchWeatherData 函式使用 Dart 的 http 包通過 HTTP 連線到伺服器。你還可以使用其他 Dart 包，但是如果你打算向 Flutter 程式新增 Web 支援，則這是官方推薦的包。
同時記下 WEATHER_API_URL 常量。在執行程式之前，請先更新此常量的值，以便它可以連線到本地 Node.js 伺服器上執行的 API。該網址必須包含你計算機的主機名。 Android 模擬器或物理裝置無法訪問 localhost URL。
探索 Node.js 伺服器和天氣 API
在編輯器中開啟 weather-app-nodejs-server 專案程式碼。
其中有一些重要的檔案和目錄：
public/api-test.html檔案可用於快速測試啟動後伺服器是否按預期工作（例如，``http://localhost:3000/api-test.html`）routes/weather.js檔案包含一個簡單的 GET API，該 API 接受 path 引數並返回天氣資料（例如，http://localhost:3000/api/weather/londonon）- 你可以在
public-flutter資料夾中複製氣象程式的已編譯 web 版本。設定 Node.js 伺服器以將檔案從該目錄提供到根上下文（例如，http://localhost:3000）
步驟2：向 Flutter 應用新增 web 支援
由於目前 web 支援仍是技術預覽，因此需要最新的 Flutter 開發中版本，也稱為master channel。在 weather_app_flutter 儲存庫的根資料夾中，執行以下命令：
flutter channel master
flutter upgrade
複製程式碼提示：在Windows上的 Visual Studio Code 的 bash shell 中執行 Flutter 命令時，你可能會遇到 “Unknown operating system. Cannot install Dart SDK.”錯誤。請嘗試在普通的 Windows command shell中執行命令。
升級過程可能需要幾分鐘。接下來你將需要在 Flutter 安裝中啟用 Web 支援：
flutter config --enable-web
flutter devices
複製程式碼啟用 web 支援後，你將在裝置列表中看到一個新的 Chrome 裝置。如果沒有看到 Chrome，請在執行以下命令重新整理裝置列表選單後重新啟動 Visual Studio Code。
要將網路支援新增到 weather app，你需要在 weather_flutter_app 專案的頂級資料夾中執行以下命令：
flutter create .
複製程式碼create 命令將對該程式進行一些修改，你可以在這個提交中看到。最值得注意的變化是新增了一個包含 index.html 的子資料夾 web ：
通過在 weather-app-nodejs-server 的根目錄中執行以下命令來啟動 Node.js 伺服器：
npm start
複製程式碼從 Visual Studio Code 的裝置列表中選擇 Chrome，然後開始除錯。或者，你可以執行以下 flutter命令：
flutter run -d chrome
複製程式碼由於 Flutter 需要即時下載其他依賴項時，你第一次在 Chrome 中啟動該應用可能會花費一些時間。 最終你將在瀏覽器中看到天氣應用正在執行。可能會有某些樣式與你在模擬器或物理裝置上看到的樣式略有不同。
你會注意到該應用沒有顯示來自天氣 API 的任何資料。如果你開啟 Chrome DevTools，則會看到跨域資源共享錯誤。
瀏覽器不允許 Flutter Web 伺服器向 Node.js 伺服器發出請求，因為它們執行在不同的埠上。你可以通過在伺服器上啟用跨域資源共享或安裝 Chrome 外掛來禁用 CORS 來解決此問題。
我們現在將忽略這個錯誤，因為在下一步中，我們將直接在 Node.js 伺服器上執行預編譯的 Flutter Web 程式碼，從而完全消除跨域請求。
嘗試修改 main.dart 檔案中的某些程式碼，然後讓 Flutter 重新編譯你的程式。你會發現所做的修改不會立即顯示在瀏覽器中。這是因為 Flutter Web 尚不支援熱重啟。希望不久後能夠提供這種支援。
提示：本節中每個 Flutter 命令的詳細說明都可以在 flutter.dev 上找到。
步驟3：在 Node.js 上執行 Flutter Web 應用
現在你可以用 Flutter 在瀏覽器中執行 weather app，下一步是構建並將其複製到 Node.js 伺服器，以與 API 一起執行。
要構建 Flutter Web 應用捆綁包，請執行以下命令：
flutter build web
複製程式碼build 命令將生成 build/web 資料夾，其中包含構成天氣應用的所有靜態檔案。
把 weather_app_flutter/build/web 的內容複製到 weather-app-nodejs-server/public-flutter。如果你的 Node.js 伺服器仍在執行，請重新啟動。
通過在的瀏覽器中訪問 http://localhost:3000 ，檢視在Node.js上執行的程式。這次你的應用程式將會顯示從天氣 API 檢索到的天氣資料，而不會出現跨域資源共享錯誤。
最後的想法
取得現有 Flutter 應用並將其編譯為可部署到 Web 伺服器的 Web 應用如此簡單，真是令人難以置信。瀏覽器中呈現的使用者介面看起來幾乎與 Android 中的介面相同。
但是不能僅僅由於 Flutter 的 Web 支援而將 Flutter 視為跨平臺應用程式框架。 Flutter 團隊非常清楚， Web 支援缺少功能，存在已知的效能問題並且尚未完全支援生產環境。
可以肯定的是：Flutter for Web 的未來看起來很有希望。你可以在這裡瞭解有關 Flutter Web 支援和 Hummingbird 專案更多的資訊。
歡迎關注前端公眾號：前端先鋒，領取前端工程化實用工具包。
