乐趣区

关于flutter:Flutter-Web-近期的重要更新

咱们的公布重点优先关注在性能、开发者体验以及 Web 集成上

2021 年 3 月 Flutter Web 反对已进入稳定版,那么,下一步是什么?

咱们对用户钻研发现,有超过 10% 的 Flutter 我的项目指标是公布到 Web 平台。因而,目前咱们专一于晋升初始稳固版本的品质,并使更多的人可能将 Flutter Web 利用投入生产。

依据 Flutter 每个季度的调查结果,和咱们通过 issue、开发者面谈、社交媒体渠道中听取到的信息,咱们确立了这些优先事项。咱们刚刚收到了第三季度的调查结果,很快乐您的反馈和本次打算不约而同。

本文提供了具体的路线图和每个优先事项相应工作打算。有些个性可能会逾越几个季度的工夫来实现,应用放大镜符号 🔍 标识的个性代表它们仍需进一步考察,能力给出一个解决方案。

让 Flutter 利用在 Web 上体现得天然是一件很重要的事,这包含诸如滚动行为、文本性能、闪屏、超链接、搜索引擎优化和其余 Web 利用特有的界面性能。

RTL 文本

此前,Flutter 没有在 Web 上对从右到左 (RTL) 的语言 (如阿拉伯语和希伯来语) 提供残缺的反对。尽管框架自身反对 RTL 文本,但 Web 引擎疏忽了 LTR 和 RTL 之间的区别,从而产生了未定义的行为。

近期公布的稳定版 (2.5) 减少了对 RTL 的根底反对,Flutter Web 利用曾经反对了 RTL 语言的所有次要场景。大部分与根底反对相干的问题曾经失去了解决,并且咱们正在打算修复残余的问题。

  • 对文本编辑实现 RTL 反对 (已修复)
  • Web 上的 RTL 文本渲染故障 (已修复)
  • 带有 TextDirection.rtl 的 TextField 在 Web 上光标错位 (打算)
  • 在 RTL 应用程序中,RichText 中的 InlineSpans 重叠了 (已修复)

滚动行为

尽管 Flutter 2 对滚动做出了 一些改良,来反对桌面浏览器上的滚动行为 (如滚动条反对),但在浏览器或运行 Web 利用的操作系统上,滚动行为仍然在某些状况下没有达到预期。

尽管其中一些行为依赖于 Flutter 的桌面端反对,但咱们打算在这个路线图中,解决一些物理滚动属性和滚动条的问题,问题如下所示。咱们还打算开展对触控板反对的钻研。

  • PageScrollPhysics 呈现奇怪的行为
  • 在 (有限) 列表 Widget 中没有滚动条
  • Mac 桌面的滚动物理应该放弃范畴
  • 让滚动条防止阻塞 Sliver 和媒体查问的内边距
  • MaterialScrollBehavior.buildScrollbar 须要更新

🔍 钻研对 触控板的反对

利用加载 API

一些 Web 利用喜爱在利用加载或者提供一些自定义体验时,显示闪屏页、加载指示器或落地页。眼下,在 Flutter Web 利用内,并没有显示正在加载或实现自定义体验的简略办法;当用于渲染的 CanvasKit 体积较大时,这将会变成比拟辣手的问题。

咱们正专一于为利用启动周期提供一个显式 API,能够用来预装利用,管制利用的加载周期,并创立闪屏页或加载指示器。

  • 减少在 Web 上对闪屏页的反对

无障碍是咱们的首要任务之一;咱们旨在为您提供必须的工具以构建可拜访的 Web 利用,且利用在最常见的屏幕阅读器上运行良好。

Flutter 2.2 对无障碍反对进行了极大的改良。从那时开始,咱们就听到了一些终端用户的担心,他们试图用屏幕阅读器 (如 JAWS) 来浏览他们的 Web 利用。

在该路线图中,咱们将专一于桌面浏览器 反对的屏幕阅读器 的问题,如 snackbar 布告。咱们还将持续钻研如何进步咱们整体无障碍反对。

  • 应用回车键时未能触发按钮的点击
  • 方向键和 B 键不更新屏幕阅读器的焦点

咱们将始终优先思考性能,以改善 Flutter Web 利用的用户体验。目前咱们的次要指标是改善滚动卡顿,并放慢 Web 利用的初始加载速度。

滚动时的卡顿

咱们近期的季度考察数据显示,滚动卡顿是首要的性能问题报告之一。咱们的指标是无论在手机上应用手势,还是在桌面上应用鼠标 / 键盘,都确保 Flutter Web 利用能流畅滚动,但这也取决于 Web 利用冀望用户滚动内容的类型和数量。

在将来几个月里,咱们将专一于改善因为图像解码造成的卡顿,咱们将持续钻研滚动的性能问题,以找到咱们能够改善的其余用例。

  • 将图像解码转移到 Web Worker
  • 升高 在 CanvasKit 渲染引擎中使平台视图的老本

捆绑 CanvasKit (离线反对)

目前,用 CanvasKit 渲染的 Flutter Web 利用须要额定的手动步骤,能力作为渐进式 Web 利用 (PWA) 离线工作。为了在离线模式下齐全作为 PWA 工作,并确保利用合乎严格的内容安全策略,咱们须要捆绑 CanvasKit 和备选字体。

咱们将首先捆绑 CanvasKit,而后捆绑字体,并增加必要的工具以启用离线模式。

  • CanvasKit 的后端不应该依赖于不稳固的谷歌字体
  • 反对捆绑的 CanvasKit 而不是通过 CDN

CanvasKit 的下载大小

CanvasKit 的性能优于基于 DOM 的办法,因而是咱们在桌面浏览器上的默认渲染器。然而,下载利用所需的工夫会影响初始加载性能 (以及在 Web 上运行的 Flutter 利用的 Lighthouse 得分)。

在此路线图中,咱们将钻研如何缩小 CanvasKit 的下载大小,以努力提高初始加载性能。咱们心愿确保终端用户的设施或浏览器不会解决大量的有效载荷。

🔍 改善 CanvasKit 的下载大小

🔍 找到一个大小适合的表情符号备选字体

晋升浏览器代码集成的能力,有利于 Web 平台劣势的施展。Flutter Web 利用有两种形式与 HTML 集成。1) 在 Flutter Web 利用中应用 HTML 平台视图,或 2) 将 Flutter 作为内容集嵌入现有的 Web 利用 (相似于 Web 的附加利用)。目前前者曾经可用且须要改良,而后者将是一个新性能,须要进一步设计和开发。

用自定义元素嵌入 (增加到现有利用 add2app)

明天,将 Flutter Web 利用嵌入现有网站 / Web 利用的惟一办法是通过 iframe。尽管这在某些场景下是可行的,但对于那些缓缓将其 Web 利用迁徙到 Flutter 的开发者来说,这并不是一个现实解决方案。

在该路线图中,咱们将钻研并设计一款定制的解决方案,使您可能嵌入 Flutter Web 利用,相似于增加到利用的挪动场景。

🔍 渲染自定义元素内的利用

Flutter 的生态系统包含了用于开发的性能,但目前依然不足 Web 的性能反对,如插件、调试、热重载等。为了让您在 Web 端有一个良好的开发者体验,咱们将持续缩减挪动端和 Web 端之间的差距。

相机插件

自最后的 Web 稳固版本公布以来,相机插件始终是呼声最高的插件之一;许多人发现,在将 Flutter 挪动利用引入 Web 时,同步差距是一个次要的问题。

在 Flutter 2.5 稳定版中,咱们提供了这个插件的晚期版本,能够初始化相机,显示相机预览,并拍摄照片。咱们收到反馈后将会对这个插件进行改良。

  • 为 Web 减少相机反对 (已修复,一些 PR 待定)。

以上是对目前咱们在 Web 上路线图的概述,GitHub 问题列表 仍然是咱们正在解决的问题起源。咱们可能会依据理解到的状况和你的反馈来减少、缩短或推延性能。

咱们非常重视您的反馈,并感谢您判若两人的反对。

感激 flutter.cn 社区成员 (@AlexV525、@Vadaski、@MeandNi) 以及 Lynn 对本文的审校和奉献。

退出移动版