在 2019 Google 開發者大會上,官方宣佈了 Flutter Web 合併到了 Flutter SDK 中,也意味著同一套程式碼正式的實現了跨平臺開發。

主要命令:
flutter channel master
flutter upgrade
flutter config --enable-web
cd <into project directory>
flutter create .
flutter run -d chrome
複製程式碼
1、首先要保證 Flutter 版本是在 Flutter 1.9 或以上
可以通過 Flutter --version 來檢視

2、使用 master channel 來進行 Web 開發
通過 flutter channel master命令切換到 master 渠道上,當然預設就是 master 的,可以不用切換。

3、開啟 Web 支援
通過 flutter config --enable-web 開啟 web 支援。

一旦開啟了 Web 支援,執行 flutter devices 就能看到 chrome 裝置資訊。

4、初始化一個 futter web 專案
通過 flutter create . 命令來初始化一個 flutter web 專案。

5、web 專案執行
通過 flutte run -d chrome 來執行專案。執行之後會自動開啟 chrome 瀏覽器檢視效果。


用 Android Studio 開啟這個專案之後,可以發現已經有 Chrome 這個執行選項了。

6、生成 release 產物
Release 構建產物使用 dart2js(不是 dartdevc)生成了一個單獨的 JavaScript 檔案。可以通過帶有 release 標誌的執行命令或是 flutter build web 來構建。輸出檔案在 build/web 目錄下,包括需要一起提供的 assets 資原始檔。因為 debug 構建可能包含數千個小檔案,所以這裡不支援 debug 構建。

7、注意
- 雖然 Web 支援已經被新增到主倉庫,但是還缺少一些特性,且存在已知的效能問題。 因此不建議將 Web 應用部署到生產環境中。
- Flutter Web 應用不支援熱過載。
- 瀏覽器終端重新整理按鈕不會重新整理應用,但是可以在執行 “flutter run -d chrome” 的控制檯中輸入“R” 進行重新整理。
- Web 應用是不支援檔案系統訪問的,因此無法使用 dart:io 這個包。
- Web 應用支援後退按鈕,前進按鈕目前不支援。
- HTTP 請求適用於移動裝置,但不適用於網路。 Web 應用程式有特殊的安全限制。如果你遇到問題,請檢查正在訪問的 Web 伺服器是否設定了接受來自託管 Flutter 應用程式的域的請求的 CORS 標頭。
參考:
https://flutter.cn/docs/get-started/web
https://flutter.cn/docs/development/platform-integration/web
複製程式碼
最後
歡迎關注「Flutter 程式設計開發」微信公眾號 獲取更多技術分享。
