用不成熟的 flutter web 做了个网站 - 哭一场

[registered]

用不成熟的 flutter web 做了个网站

目前，flutter web 还不成熟，官方不建议在生产环境中使用。于是我本着“我不入地狱谁入地狱”的觉悟，趟了趟这坑浑水。

说实话，比想象中的坑少，并没有被坑得爬不起身。但依旧还有几个大问题还没有找到解决方案。

先上地址：

• 放在 github.io 上的：https://dev.kuyichang.com

• 放在垃圾服务器上面的：http://www.kuyichang.com

两个地址都非常慢，无法忍受的慢，所以如果不是非常感兴趣，恐怕你是和它无缘了。

tips：挂代理速度还是可以的

既然如此，先挂几张图吧

简单介绍一下这个小破站 - 哭一场（ kuyichang ）：

• 包括电影、故事、照片、一言、说点五个板块，内容核心就是两个字：“催泪”，网站定位是帮憋屈的你哭出来，让你哼着歌进去，喊着娘出来。

• 电影数据来自豆瓣

• 故事、照片、一言来自网络收集

• 说点里面的诗词 API 来自https://www.jinrishici.com/

• 有一个切换天气的功能，使用动画实现，事实证明大量控件的 rebuild 会干死自己

• 目前没有做适配

需要吐槽的地方：

• debug 是真难用

• 图片上面不能盖一层颜色(纯色或渐变)

• build 的 js 太大了

• 多控件 rebuild 还是卡的

总体感受：

确实能很真切地感受到 web 端的不成熟，很多交互和布局都是移动端的模式，硬用在 web 上来感觉有些别扭。

不得不夸赞的地方是，dart 用得很舒服，继承了传统语言的优点，又具有现代语言的优雅高效。

刚开始对于 widget 的嵌套很不适应，但慢慢地也就习惯了，其实它也促使你更细化地分离组件，对于 flutter 的 widget 树 rebuild 机制来说，组件颗粒度是越小越好的。

flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。

欢迎资源推荐或拍砖~

[murmur]

windows 下这渲染看着真难受。。。

[xttli123]

很卡

[maomaomao001]

mac 上非常卡 （滑动时）

[Vegetable]

一言那个模块，回弹太快了点，用滚轮都鬼畜了

[murmur]

另外一个问题，电影的页面似乎只支持滚轮，不支持键盘事件

[ngrok111]

github 地址访问速度还行，另一个半天都打不开( 土澳渣网 )

[windfarer]

有点卡

[Tink]

图好像全挂了

[itstudying]

下雨的效果是一阵一阵的

[zhw2590582]

慢，而且控制台很多错误

[speedofstephen]

好巧阿，我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。

[zhanziyang]

太丧了，玩不下去

[CoCoMcRee]

很好奇...怎么会如此的卡

[jayin]

还有很大的改进空间

[lookas2001]

卡。。卡的

[oubenruing]

我还以为写 flutter web，写的楼主哭了一场。

[murmur]

不知道你们说网卡还是页面卡，windows 7 代 u chrome cpu 瞬时占用突破 50%，750ti 亮机卡都有 30%负载，不过时好时坏，考虑到 windows 的 chrome 比 osx 要好，mac 卡也是应该的
关雨保平安

[heijiangjun]

简单的效果也这么卡，确实有点不能接受。话说设计挺漂亮的，楼主自己设计的吗

[heijiangjun]

“flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩，debug 模式下运行在红米 k20 上感觉挺流畅的，视觉上也和原生没太多区别啊

[pota]

1.5M 的 js。。。