最近看到 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 ✨哦。