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

有体验过 flutter web 的同学吗?

  •  
  •   Veneris · 2021-03-18 14:11:18 +08:00 · 3245 次点击
    这是一个创建于 516 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    就自家网站做成这样,简直是最好的反例
    shynome
        4
    shynome  
       2021-03-18 15:01:58 +08:00   ❤️ 1
    flutter web 我遇到的问题

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


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

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

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

    * * *

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

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

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

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