V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
探索世界的好奇心万岁
Veneris
V2EX  ›  分享发现

有体验过 flutter web 的同学吗?

  •  
  •   Veneris · 255 天前 · 2670 次点击
    这是一个创建于 255 天前的主题,其中的信息可能已经有所发展或是发生改变。

    把之前刚用 flutter 写的 app 加上了 web 支持,然后几乎各种报错。

    比如 app 上会弹出键盘,web 上不会,web 需要滚动条,app 上不需要,导致依赖的各种库不兼容。

    新建个项目,flutter run -d chrome直接空白给我看,但是一个 error 都没有,看了看 github 遇到这个问题不在少数。

    想写一套代码,同时兼容 web/两家 app/三家桌面,有点不太抱希望了。

    现在有没有哪家网站是用 flutter 跑的已上线的?

    github 也搜不到可堪一看的示例项目,有没有同学推荐下。

    29 条回复    2021-03-20 11:31:57 +08:00
    ParfoisMeng
        1
    ParfoisMeng   255 天前
    > 想写一套代码,同时兼容 web/两家 app/三家桌面,有点不太抱希望了。
    说实话直接放弃吧。代码可以跨平台,但是页面设计、使用习惯、平台差异之类是没法儿跨的。业务逻辑代码可以尽量复用,但是 UI 层的大多都要对应平台去写。
    目前相对成熟的移动端跨平台方案还可以,主要是 Android 、iOS 在表现上差异较小,所以 Flutter/RN/等一套代码可以两端跑,但是它们大多数功能性的东西还是要原生实现。
    Jirajine
        2
    Jirajine   255 天前 via Android
    同时兼容 web 和桌面好说,web+web 套壳。
    同时兼容两家 app 也好说,flutter/rn
    但桌面端和移动端是很难兼容的,交互逻辑差异太大。
    murmur
        3
    murmur   255 天前
    https://gallery.flutter.dev/

    我这看所有英文字都是方块

    就自家网站做成这样,简直是最好的反例
    shynome
        4
    shynome   255 天前   ❤️ 1
    flutter web 我遇到的问题

    - 文字无法复制, 全部是 canvas 渲染的
    - 字体默认从谷歌 cdn 加载, 加载未完成时字体渲染成方块
    - 不支持 history 路由模式
    - 各种资源大小总和过大, 默认模式下要 10M , 优化后也需要 2M
    love
        5
    love   255 天前
    @murmur 我的不是方块呢,完全没问题,操作也很顺滑( Firefox
    lagoon
        6
    lagoon   255 天前
    同时兼容 app 和 web,感觉听起来都微妙诶。


    事实上,我也从来没见过同时兼容手机和 pad 的。尺寸相差那么大,所谓的兼容就是做各种处理。
    love
        7
    love   255 天前
    不过明显还是个半成品,用画布画的界面操作手感也怪怪的没 HTML 手感好,卡倒不是太卡只是 CPU 满载

    这副样子一年内肯定不能用
    huobazi
        8
    huobazi   255 天前
    不要老想着通吃,端了别人的饭碗,容易撑着,O(∩_∩)O 哈哈~
    Veneris
        9
    Veneris   255 天前
    @murmur
    @love
    我这看着没问题,但是滑动明显不跟鼠标。。。
    murmur
        10
    murmur   255 天前
    @Veneris 那就是你们都科学呗,我的环境不科学
    AndyAO
        11
    AndyAO   255 天前
    让我想起了这个观点,想用新技术没问题,但前提是对这个新技术有很深的理解,能够处理遇到的各种问题。
    在此期间会大量的学习,而且要在无人区中漫步,要做好这样的准备。
    AndyAO
        12
    AndyAO   255 天前
    @AndyAO #9 上述观点来自《‪教授 洪强宁和他穿越的技术江湖》

    豆瓣选择使用 Python,当时用这个技术做 Web 是很新的。

    * * *

      阿北曾经表示,别人做过、做得成熟的事情豆瓣一定不会做。这种风格体现在公司的方方面面,在技术上也是如此。豆瓣的标准是,在新技术与成熟技术之间,一定选择新技术——新技术之所以出现,也正是因为它解决了原有成熟技术携带的某些问题。
      “新的往往好过旧的。”洪强宁说。但前提是,完全掌握这项技术,“ 对于能够解决它带来的问题有足够的自信心。”
      无论怎样,一旦与过去或他人在道路选择上划清界限,掉入陷阱的风险也会随之增高。
      豆瓣当时选择的很多技术应用都处于刚刚成熟的阶段。遇到新问题的回答也非常简单:去研究它——至少要可以修改它的代码。失败的案例累积了不少,但,“没有什么大不了的”。
    izin
        13
    izin   255 天前
    @love chrome
    surbomfla
        14
    surbomfla   255 天前
    @murmur
    用的什么设备不说
    用的什么系统不说
    用的什么浏览器也不说
    这就是大佬吗? 怕了
    HeapOverflow
        15
    HeapOverflow   255 天前 via iPhone
    flutter web 不知道有什么胆量标 stable 的...
    Muniesa
        16
    Muniesa   255 天前
    字体倒没问题,可能因为挂了梯子,就是滚动感觉不是很流畅,用的 chrome
    meteor957
        17
    meteor957   255 天前
    @shynome 这差的也太多了...
    surbomfla
        18
    surbomfla   255 天前
    @murmur 在访问外网的不太好的情况下,字会变成方块,等 2-3 秒就好了
    mrhhsg
        19
    mrhhsg   255 天前
    主要还是性能问题,列表滑动丢帧很明显
    love
        20
    love   255 天前
    @Veneris 的确,鼠标上下狂拖有点卡,可能页面太复杂? 这个简单点的页面倒是完全没问题,你在图片列表里狂拖都非常顺滑,纯 WEB 很难做到这么滑 :
    https://vivid-explorer.web.app/
    damngood
        21
    damngood   255 天前
    滑动页面是挺卡的. Safari on iMac 27 2020
    wanguorui123
        22
    wanguorui123   255 天前 via iPhone
    flutter Web 还是比较鸡肋的
    WebKit
        23
    WebKit   255 天前 via Android
    之前写过一个,卡,bug 很多
    murmur
        24
    murmur   255 天前
    @meteor957 css 都有字体降级机制,都 2021 年了,因为英文字体在 utf-8 环境下还能出渲染问题,也够奇葩的
    IGJacklove
        25
    IGJacklove   255 天前 via Android
    官方有个演示项目,体验了一般吧,不过跨多端还是挺厉害的。
    sunbreak
        26
    sunbreak   254 天前   ❤️ 1
    自己使用不建议,除非你有美团这种优化能力: https://tech.meituan.com/2021/03/18/flutterweb-in-meituanwaimai.html
    SmiteChow
        27
    SmiteChow   254 天前
    目标不同,技术再强也抹不平的,还是算了吧。
    wednesdayco
        28
    wednesdayco   254 天前
    @murmur 感觉还行,字体方块那是字体文件没拉取到吧……
    AndyAO
        29
    AndyAO   253 天前
    <迈向 Flutter 深水区:美团外卖 Web-App 一体化架构实践>
    https://mp.weixin.qq.com/s/PWeV2CDP47uHNo9P2QeM2A

    可以看到美团遇到了很多 Flutter 上的硬性问题,不使用黑客(超越边界)的方法已经很难解决了,如果没有迈向深水区的勇气,那么估计是要放弃的,但美团组织研发能力去解决了它们,所以他们的新技术用的非常成功,节省了大量的成本。

    这就是为什么有些人用新技术做出来的东西感觉像个小学生,而有些人却做得很成功。

    解决的硬性问题主要有:
    1. 各种各样很小的硬问题,解决的方案就是自己 Fork 官方 SDK,然后将问题绕过或解决,这些问题随着版本的更新,也得到了很大的缓解。
    2. 处于合规和安全考虑,Flutter 官方是不支持动态化的。通过离线分析和运行时解释执行的方案解决了这个问题。
    3. 在官方不支持的条件下适配鸿蒙,将 Flutter 引擎的实现层替换成鸿蒙的 API 。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1599 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:48 · PVG 00:48 · LAX 08:48 · JFK 11:48
    ♥ Do have faith in what you're doing.