Flutter Web 调试问题：Chrome 中文本输入点击断言失败（Flutter 3.27.0、Dart 3.6.0）

Question

我在 Chrome 上调试 Flutter Web 应用程序时遇到了一个特殊问题。我的开发设置如下：

颤振版本：3.27.0
飞镖版本：3.6.0
编辑器：Visual Studio Code (1.95.3)
操作系统：macOS (Apple M2)
浏览器：Chrome (131.0.6778.139)

问题描述
我直接从 Flutter API 官方页面（Form Class Documentation）复制了 Form 示例，并使用 Flutter 的 Web 调试模式在我的环境中运行它。但是，当我尝试用鼠标单击文本输入字段时，遇到以下错误：

DartError: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/pointer_binding/event_position_helper.dart:70:10
targetElement == domElement
"The targeted input element must be the active input element"
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:3     throw_
errors.dart:288
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39               assertFailed
profile.dart:110
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39               _computeOffsetForInputs
profile.dart:110
lib/_engine/engine/pointer_binding/event_position_helper.dart 38:14             computeEventOffsetToTarget
event_position_helper.dart:38
lib/_engine/engine/pointer_binding.dart 1088:30                                 [_convertEventsToPointerData]
pointer_binding.dart:1088
lib/_engine/engine/pointer_binding.dart 1016:9                                  
pointer_binding.dart:1016
lib/_engine/engine/pointer_binding.dart 948:7                                   
pointer_binding.dart:948
lib/_engine/engine/pointer_binding.dart 541:9                                   loggedHandler
pointer_binding.dart:541
dart-sdk/lib/_internal/js_dev_runtime/patch/js_allow_interop_patch.dart 212:27  _callDartFunctionFast1

直接在 Flutter 官方文档的嵌入示例上运行相同的代码片段时，我没有遇到此问题。

重现步骤

1. 从官方 Flutter API 文档复制表单示例。
2. 使用 flutter create 创建一个新的 Flutter Web 项目。
3. 将 main.dart 内容替换为复制的示例代码。
4. 在 VSCode 中使用 F5 按钮开始调试。
5. 单击 Chrome 中的文本输入字段。

观察

• 该错误表明目标输入元素必须是活动输入元素。
• 即使我使用相同的示例代码，在官方 Flutter API 页面上也不会出现该错误。

问题

1. 为什么我的环境出现这个错误，而官方文档页面却没有出现这个错误？
2. 如何解决此问题并使文本输入字段按预期工作？ 任何帮助或见解将不胜感激。

提前谢谢您！

Answer 1

这不仅仅是您环境中的问题，也是最近 3.27 版本的问题。 Flutter 问题跟踪器 here 上已经填写了有关此问题的问题。

回答您的问题：

1. 这些交互式代码示例通过将

   dartpad.dev

   嵌入到页面来使用它。 AFAIK，

   dartpad.dev

   仍在使用 Flutter 之前的稳定版本，即

   3.24.5

   和 Dart

   3.5.4

   。我最好的猜测是这个版本中不存在错误。

2. 您可以等待热修复（即

   3.27.1

   或更高版本），其中（我很确定）将包含此问题的修复。但目前还没有推出此修补程序的时间表。至少，在发布此答案时尚不清楚。

另一种方法是降级/升级您的 Flutter 安装。您可以尝试 3.24.5（因为 darted 使用它并且此代码在那里工作），或者您可以尝试

master

通道，因为团队提到它已修复（关于此事的 comment）。