哥哥手把手教你把现有的Flutter项目迁到WEB端,喜大普奔,
Flutter主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 、Android、web和桌面端。
Flutter的目标是通过单一代码库同时构建移动和Web应用程序。 但是,为了进行实验,Flutter_web是在一个单独的命名空间中开发的。 因此,截至目前,现有的移动Flutter应用程序无法在不进行更改的情况下在Web上运行。
简而言之就是Flutter现在还不支持既是移动应用也是Web应用,需要自己进行迁移,但相信日子不会太远。
:迁移Flutter项目到WEB端:
思路:大多数Dart代码都是共用的,需要改变的只是一些依赖和配置。
SStep 1 :
首先是pubspec.yaml需要用flutter_web来替换flutter,同时移除asset和字体相关的代码。
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