Flutter Web调试异常：Chrome点击文本输入触发断言失败（3.27.0/3.6.0）

开发环境 #

• Flutter版本：3.27.0
• Dart版本：3.6.0
• 编辑器：Visual Studio Code（1.95.3）
• 操作系统：macOS（Apple M2）
• 浏览器：Chrome（131.0.6778.139）

问题描述 #

从Flutter官方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                                  <fn>
pointer_binding.dart:1016
lib/_engine/engine/pointer_binding.dart 948:7                                   <fn>
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

相同代码在官方文档的嵌入示例中无此问题。

复现步骤 #

1. 从Flutter官方Form类文档复制示例代码；
2. 执行flutter create命令创建新的Flutter Web项目；
3. 替换项目中main.dart的内容为复制的示例代码；
4. 在VSCode中按F5启动调试；
5. 在Chrome浏览器中点击文本输入框。

疑问解答 #

1. 为何本地环境出现错误，官方示例却正常？ #

• 版本差异：官方文档嵌入示例可能使用了更新的Flutter稳定版本，该断言错误是Flutter 3.27.0版本中的已知bug，后续版本已修复；
• 运行模式不同：官方示例可能运行在Release模式，而断言仅在Debug模式下触发；
• 环境配置差异：官方嵌入环境可能有特殊的DOM处理配置，避免了该断言的触发条件。

2. 如何解决该问题？ #

• 升级Flutter版本：将Flutter升级到最新稳定版（如3.30.x及以上），该问题已在后续版本中被修复。执行命令：

  flutter upgrade
  

• 临时切换到Release模式运行：若暂时无法升级，可尝试用Release模式启动项目，断言不会在该模式下触发：

  flutter run --release -d chrome
  

• 验证Chrome兼容性：确保Chrome版本与Flutter版本兼容，若升级Flutter后仍有问题，可尝试更新Chrome到最新版本。

内容的提问来源于stack exchange，提问作者Honken