Veneris

有体验过 flutter web 的同学吗?

  •  
  •   Veneris · Mar 18, 2021 · 5408 views
    This topic created in 2065 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

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

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

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

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


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

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

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

    * * *

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

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

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

    解决的硬性问题主要有:
    1. 各种各样很小的硬问题,解决的方案就是自己 Fork 官方 SDK,然后将问题绕过或解决,这些问题随着版本的更新,也得到了很大的缓解。
    2. 处于合规和安全考虑,Flutter 官方是不支持动态化的。通过离线分析和运行时解释执行的方案解决了这个问题。
    3. 在官方不支持的条件下适配鸿蒙,将 Flutter 引擎的实现层替换成鸿蒙的 API 。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1056 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 114ms · UTC 18:29 · PVG 02:29 · LAX 10:29 · JFK 13:29
    ♥ Do have faith in what you're doing.