共计 2933 个字符,预计需要花费 8 分钟才能阅读完成。
咱们的公布重点优先关注在性能、开发者体验以及 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 对本文的审校和奉献。