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

从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版本。

版本修改为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：https://github.com/dengyin2000/beauty_sample_app

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