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

欢迎资源推荐或拍砖~

[maxint]

很棒

[maxint]

@studyro 是直接在 canvas 上画的吗

[liuxey]

关雨保流畅

[registered]

@herozzm 那您可不是牛逼坏了

[wanguorui123]

勇士

[xiaotianhu]

我也以为是 lz 写的哭了一场....尴尬

[xuanbg]

下雨似乎影响点击？？

[Maiiiiii]

一言那里好像没办法用滚轮滑动
小雨就卡的不行
故事内容不能被选中，对于我这种喜欢选一段高亮看字的，有点别扭

[version0]

@studyro 确实啊，这种唯一的用处就是做个不想被爬（ SEO ）的网站了吧

[milukun]

感觉并不慢 打开还挺快

[sodulty]

啥时候能顶掉 rn 上位呢

[xjqxz2]

单页应用怎么才能给爬虫们收录啊

[loginbygoogle]

😀

[milukun]

问一下 flutter 做的 web 是不是不存在 url 的路由一说？ 只能是全部运行在一个页面

[registered]

@milukun 据我所知，是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”，这里的“页面”指的是 flutter 概念上的页面，不是指 web 页面。

[zcoderrr]

@milukun
@registered
既然是 web 肯定要有 url 路由的，可以看下我写的静态博客，可以直接通过地址跳到指定文章 ： http://toseetheworld.cn/#/post?title=Welcome
仓库地址： https://github.com/zcoderr/Fluttlog

[registered]

@zcoderrr nice work ！之前我也这样试过，不过不知道为什么当时没成功，只能眺首页。我以为 Flutter 不支持 url 传进来的路由地址。

[39499740]

@registered 话说这个你重新 build 过么？ 136 天了，不知道现在的渲染效率是不是会提高一些

[CatalinaMylove]

我想哭 但是哭不出来

等到思念像海

太丧了，玩不下去