Flutter Web尝鲜

作者 : 开心源码 本文共1310个字,预计阅读时间需要4分钟 发布时间: 2022-05-13 共139人阅读

最近需要跟公司前台部门搞一次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

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

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

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

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

版本修改为any

增加provider flutter web的dependency overrides:

provider flutter web的dependency overrides

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

assets

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

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

最终效果

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

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Flutter Web尝鲜

发表回复