用不成熟的 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 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。

欢迎资源推荐或拍砖~

[registered]

@maomaomao001 关雨保平安，😝

[registered]

@Vegetable 额，是我考虑不周，很多年没用过鼠标了

[registered]

@murmur 额，没太明白您的意思。是说电影的介绍信息的滚动吗

[registered]

@ngrok111 等我有钱了，肯定换个国内的服务器，🐶

[registered]

@windfarer 关雨保平安，😝

[registered]

@Tink “照片”板块的图片源和其它的图片源不一样，应该不会同时挂吧

[banliyaya]

用 macbookpro 和 xr 很流畅，但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈

[LancerComet]

除了下雨卡，我感觉速度还 OK，Windows 10 + Chrome，Thinkpad X1E

[Anarchy]

下雨比较卡，其他没什么问题 macbookpro 2015 款

[registered]

@zhw2590582 嗯，发现了两个错误。一个是逻辑错误，一个是权限问题。感谢指出

[registered]

@heijiangjun 谢谢，是自己设计的

[registered]

@heijiangjun 我说的差距不是说性能，是视觉感受。确实和很多同学交流，他们都说没什么区别，我倔强的认为有差别，如果非要形容一下的话，就是“无质感”。

[registered]

@speedofstephen 感兴趣的话可以一起来玩啊 ~

[registered]

@chanchan 感谢指出。欢迎交互大佬提建议

[viewsnake]

非常棒的网站，加入我的收藏夹了，现在这个碎片化时代，我特别讨厌头条抖音快手那种主动推送的 APP，让你失去主动思考的灵魂，统统卸载，手机只保留支付宝和微信。

[registered]

@itstudying 是的。因为如果是连续的话，对象没办法复用，会更卡，暂时做不到。

[registered]

@viewsnake 哥们你这个留言像是机器人呀 ~

[kasusa]

嗯，，好卡呀不知道为啥

[itstudying]

想去说点啥看到需要回复诗句的下一句，想去百度搜答案发现不能复制，想去 f12 复制发现定位不到标签，最后还是来这回复了。就别为难我这个没文化的后端 boy 了，所以，用 dart 写出来就是不能定位标签的吗？还是我姿势不对

[stardust21]

完成度挺高的了，不过 js 是真的挺大的