Flutter Web 之 Hello World

在 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
複製代碼

一、首先要保證 Flutter 版本是在 Flutter 1.9 或以上

能夠經過 Flutter --version 來查看

二、使用 master channel 來進行 Web 開發

經過 flutter channel master命令切換到 master 渠道上，固然默認就是 master 的，能夠不用切換。

三、開啓 Web 支持

經過 flutter config --enable-web 開啓 web 支持。

一旦開啓了 Web 支持，運行 flutter devices 就能看到 chrome 設備信息。

四、初始化一個 futter web 項目

經過 flutter create . 命令來初始化一個 flutter web 項目。

五、web 項目運行

經過 flutte run -d chrome 來運行項目。運行以後會自動打開 chrome 瀏覽器查看效果。

用 Android Studio 打開這個項目以後，能夠發現已經有 Chrome 這個運行選項了。

六、生成 release 產物

Release 構建產物使用 dart2js（不是 dartdevc）生成了一個單獨的 JavaScript 文件。能夠經過帶有 release 標誌的運行命令或是 flutter build web 來構建。輸出文件在 build/web 目錄下，包括須要一塊兒提供的 assets 資源文件。由於 debug 構建可能包含數千個小文件，因此這裏不支持 debug 構建。

七、注意

• 雖然 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 編程開發」微信公衆號 獲取更多技術分享。