Flutter Web 實戰 - 俄羅斯方塊

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

推薦使用 github.com/kevmoo/pean…

結語

優勢

一次編寫，處處運行，爽！！！

缺點

flutter_web 雖然也是使用 flutter 構建 web 應用，可是因爲庫的包名與flutter不一致，致使了遷移過程須要修改不少文件。

因而，這樣移動開發和web開發仍是須要維護兩套代碼（或者說須要在兩個代碼庫中進行同步），這麼徒增了很多成本。但願之後能夠改進吧。

---

最後再附上github地址 github.com/boyan01/flu…

若是以爲有幫助，別忘了點顆 star ✨哦。