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