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

欢迎资源推荐或拍砖~

[Lombard]

不知道为啥，我对这种 hover 效果有种生理上的不适

[lylijincheng]

@CoCoMcRee 同好奇。。

[zokingo]

@Lombard 是的，我也有这种感觉。画风变换太大又给人卡顿的感觉。不知道是不是单纯 PC 端的问题

[kkniub]

(((((()))))) 是这样的吗?

[love]

看了标题还以为是 flutter 写 web 太痛苦了大哭了一场

[gaigechunfeng]

我靠。为什么我看着一点都不卡啊？
难道是我的电脑配置太牛逼了。

[mmrx]

确实一卡一卡的，不是很流畅
不知道是代码的问题，还是确实 flutter web 转 js 优化做得不够
楼主行动力很强

[mgrddsj]

移动端竖屏显示不出来电影图片，横屏时内容显示不全。滑动时卡得不行，Android Chrome 79 + 骁龙 835

[chanchan]

电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
别的动画也太突兀了,没内味儿

[murmur]

@mmrx 应该是 flutter 转 js 优化不行，edge 的调试工具看 70%的 cpu 占用都在脚本上

建议谁给楼主优化一下，做个欢快点的主题，名字我都想好了就叫撸一场

[Cbdy]

f12 了一下，这个页面爬虫没法爬😂

[mmrx]

@murmur 哈哈哈哈 @registered 建 议 改 为： 撸 一 场

[hst001]

滑动卡看起来像 bug，比较有规律

[moonrailgun]

这个下雨的特效惊到我了

[sneezry]

内容非常好！如果滚动能顺滑一点，过度动画慢一点感觉会更好

[wdaye]

mac 打字 滑动 都卡到不行。

[snowspace]

“移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀

[superpeaser]

看着还不错啊

[registered]

@murmur 关雨保平安，😝

[registered]

@xttli123 关雨保平安，😝