Flutter Web 開發部署

HarryChen²⁰¹⁹發表於2021-04-02
FlutterWeb

背景：flutter目前版本已經升級到2.0，flutter-web也已經進入到了穩定版，修復了眾多bug。
首先將flutter版本切換至2.0，使用上文說的工具

switch.png

使用方法：

  1. 開啟Web支援

flutter config --enable-web

輸出log：

Setting “enable-web” value to “true”.

You may need to restart any open editors for them to read new settings.
複製程式碼

重啟AndroidStudio

  1. 老專案支援需要建立web 目錄

flutter create .

這樣會在專案目錄下建立web 目錄

  1. 執行應用在瀏覽器中

//谷歌瀏覽器中執行
flutter run -d chrome
4. 編譯
flutter build web

buildweb.png

5.部署tomcat

tomcat.png

tomcat_root.png

  1. 啟動tomcat ，網頁檢視 http://localhost:8080/

./startup.sh

show.png

原本是準備在公司一個app裡面想把原有一些配置協議規則簡單的頁面改造成flutter web形式，最後發現不太可行，flutter web的產物是一個完整的應用，不可能每個單獨的頁面都打包成一個應用。

對於客戶端開發人員來說，特別是涉及到flutter開發的，可以零成本過渡到web專案的開發。對於現有的flutter專案，再剔除安卓特有的功能後，專案程式碼保持100%的可移植性，除了一些瀏覽器特有的屬性，像滑鼠的hover之類，各個端的表現差異不大，不必過於擔心適配問題。

phone.png 由於web端一大部分由canvas進行繪製，當頻繁縮放螢幕等需要進行頁面重繪的操作時，很容易面臨效能的問題。由於自身Flutter Web並沒有專門的開發者工具，而Chrome自帶的工具無法準確找到關鍵元素，導致後續開發除錯困難。

webdebug.png

相關文章