Flutter Web尝鲜

最近需要跟公司前端部门搞一次Flutter的技术分享,分享主题就是Live coding。花20分钟完成一个简单的美女图库(it男都好这口)。作为公司的前端部门,不仅是有android、iOS开发,还有众多的H5前端开发。为了照顾H5的开发兄弟,也为了突出下谷歌Flutter有一统大前端的决心,还是需要对Flutter Web尝尝鲜。

Flutter使用的是dart语言,本来就是专门为javascript而生的。说到这里,联想到大约十多年前的谷歌gwt项目http://www.gwtproject.org/,那时候正是web2.0、ajax兴起,一大堆js框架涌现出来,例如prototype,dojo等等。作为一个java开发者,非常不习惯javascript缺少静态编译的特性。当遇到gwt时,就像遇到初恋的感觉。但是当用gwt开发大型项目的时候,缺点也蛮明显的,那就是编译速度,java编译成js,速度非常非常慢,当时2G内存(当时是高配)的机器都扛不住。所以我猜测莫非dart就是因此而生的?

Flutter Web尝鲜_第1张图片
flutter web

从flutter web架构上来看,framework层是一模一样的,这也意味着,flutter的代码可能只需要很小的修改就能编译成web项目。

在尝鲜Flutter Web前,我其实已经完成了flutter demo的开发。整个demo也非常简单,用了一些基础的组件,FutureBuilder和provider第三方状态管理框架。下面是运行效果。

运行效果

所以我需要做的就是把这个flutter项目转成flutter web项目,按照官方的迁移手册 https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md进行迁移,除了官方文档说的那些事项,我还发现以下这些问题。

1、provider代码编译不通过,发现需要修改成provider的web版本。


Flutter Web尝鲜_第2张图片
版本修改为any

添加provider flutter web的dependency overrides:


Flutter Web尝鲜_第3张图片
provider flutter web的dependency overrides

2、Flutter web项目中除了需要把assets目录拷贝到web目录下,还需要修改代码中的应用路径。在flutter项目中是"assets/loading.png",而在flutter web中直接是"loading.png"。


Flutter Web尝鲜_第4张图片
assets

整个迁移还是非常快的,包括阅读迁移文档、搞定上面两个问题,大概花了10分钟左右的时间让flutter web跑起来了。目前flutter web还是技术预览版,还是有很多的一些bug和性能问题要解决,不建议用于生产系统,像我这样尝尝鲜还是可以的,希望正式版能尽快的出来。

最后在cmd中运行flutter pub global run webdev serve,浏览器打开http://127.0.0.1:8080就能看到效果了。

最终效果

代码已经上传到github:https://github.com/dengyin2000/beauty_sample_app

master分支就是flutter项目,for-web分支就是flutter web项目。

你可能感兴趣的:(Flutter Web尝鲜)