Flutter&Dart互联网最前沿

哥哥手把手教你把现有的Flutter项目迁到WEB端,喜大普奔,

2019-12-05  本文已影响0人  哥哥是欧巴Vitory

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

上一篇下一篇

猜你喜欢

热点阅读