最近看到 Flutter 支援 web 開發了,於是今天嘗試將之前寫的一個小遊戲移植到 flutter_web。
先把成果放上來吧
效果圖:

遊戲體驗地址:boyan01.github.io/flutter-tet…
github地址: github.com/boyan01/flu…
接下來是遷移的過程
可以參考 https://juejin.im/post/5ce515fb518825642c3f42dd 如何搭建環境
複製程式碼
先看看 flutter web 的目錄結構
這個flutter 生成的空專案的目錄結構

觀察可以發現,相對於原有的flutter 目錄結構,flutter_web 只是多了一個 web 資料夾。
1. 複製 Web 資料夾
毫無疑問,web/main.dart 就是入口了,所以先把web資料夾複製到原專案。
2. pubspec.yaml 修改
與原flutter 專案相比,flutter_web pubspec.yaml 也有較大的變化。不管那麼多,用新構建檔案替換掉原專案的 pubspec.yaml

然後重新構建一下專案。
3. 遷移
第二步完成之後,整個專案應該全部都飄紅了。(如下圖)

沒辦法,flutter_web 與 flutter 使用的不是同一個包。需要將所有名為 flutter 的 packages 全部改為 flutter_web。

另外,dart:ui 也需要替換成 flutter_web_ui/ui.dart

4. assets資原始檔
一般情況下, flutter 資原始檔都是放在 專案/assets/
目錄下,然後通過 pubspec.yaml
配置引入到工程中。
但是 web 開發不同,需要將 assets 資料夾移到 /web/ 下。

5. 其他需要注意的地方
切記移除乾淨 flutter_web 不支援的依賴,不然編譯會被跳過的。
執行專案
命令列輸入 webdev serve
來構建和執行
之後用本地瀏覽器開啟: http://localhost:8080 就可以看到效果了。
釋出專案到 git page
結語
優點
一次編寫,到處執行,爽!!!
缺點
flutter_web 雖然也是使用 flutter 構建 web 應用,但是由於庫的包名與flutter不一致,導致了遷移過程需要修改很多檔案。
於是,這樣移動開發和web開發還是需要維護兩套程式碼(或者說需要在兩個程式碼庫中進行同步),這麼徒增了不少成本。希望以後可以改進吧。
最後再附上github地址 github.com/boyan01/flu…
如果覺得有幫助,別忘了點顆 star ✨哦。