咱们的公布重点优先关注在性能、开发者体验以及 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 对本文的审校和奉献。