哥哥手把手教你把现有的Flutter项目迁到WEB端，喜大普奔，三端同庆 ！

Flutter主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 、Android、web和桌面端。

Flutter的目标是通过单一代码库同时构建移动和Web应用程序。 但是，为了进行实验，Flutter_web是在一个单独的命名空间中开发的。 因此，截至目前，现有的移动Flutter应用程序无法在不进行更改的情况下在Web上运行。

简而言之就是Flutter现在还不支持既是移动应用也是Web应用，需要自己进行迁移，但相信日子不会太远。

：迁移Flutter项目到WEB端：

思路：大多数Dart代码都是共用的，需要改变的只是一些依赖和配置。

Step 1 :

首先是pubspec.yaml需要用flutter_web来替换flutter，同时移除asset和字体相关的代码。 

S

Step 2 :

通过flutter package get更新依赖后，需要更新lib路径下dart文件中的相关引用。

差别就是将flutter替换为flutter_web而已，代码基本不用动。

Step 3 :
为了预览网页，我们需要自己创建web目录，并在目录下创建web/index.html 和 web/main.dart文件。

web/index.html

web/main.dart

至于资源文件、图片、字体等，和Flutter项目不同，这些都需要放到web\assets目录路径下，同时要记得更新代码中的相关引用。

如果有使用Material Icon的话，你需要在web/assets目录下创建FontManifest.json文件，并添加相关地址。

整个web目录会如下图所示:

运行项目，可以发现和移动端基本没有区别。

Step 3 :
如果你想查看release版本，可以运行

flutter pub global run webdev serve -r

如果你想发布制品，则可以运行

flutter pub global run webdev build

这会在项目的根路径下生成一个build文件夹，里面包含可以部署到服务器上的文件，如下图所示： 

======= 分割线 =======

参考文档

flutter_web：https://github.com/flutter/flutter_web

迁移指南：https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md