Flutter 在自动填充事件上抛出“意外的空值”（仅限 Web）

Question

每当我尝试在网络（Safari 或 Chrome）中填写表单时，都会收到

Unexpected null value

错误。经过检查，我注意到浏览器将自动填充识别为键盘事件。在第 369 行的

keyboard_binding.dart

中，我们可以看到 _handleEvent 期望事件对象包含键盘按键。

颤振版本：3.7.5 操作系统：MacOS 13.2.1 平台：Chrome 111.0.5563.64

扑医生：

[✓] Flutter（通道稳定，3.7.5，在 macOS 13.2.1 22D68 darwin-arm64 上，区域设置 en-BG） • 频道上的 Flutter 版本 3.7.5 稳定在 /opt/homebrew/Caskroom/flutter/3.0.5/flutter • 上游存储库https://github.com/flutter/flutter.git • 框架修订版 c07f788888（3 周前），2023-02-22 17:52:33 -0600 • 引擎版本0f359063c4 • Dart 版本 2.19.2 •开发工具版本2.20.1

[✓] Android 工具链 - 为 Android 设备开发（Android SDK 版本 33.0.2） • Android SDK 位于 /Users/usr/Library/Android/sdk • 平台android-33，构建工具33.0.2 • Java 二进制文件位于：/Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java 版本 OpenJDK 运行时环境（内部版本 11.0.13+0-b1751.21-8125866） • 接受所有Android 许可证。

[✓] Xcode - 为 iOS 和 macOS 开发 (Xcode 14.2) • Xcode 位于 /Applications/Xcode.app/Contents/Developer • 版本 14C18 • CocoaPods 版本 1.11.3

[✓] Chrome - 网络开发 • Chrome 位于 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio（版本 2021.3） • Android Studio 位于 /Applications/Android Studio.app/Contents • Flutter 插件可以从以下位置安装： 🔨https://plugins.jetbrains.com/plugin/9212-flutter • Dart 插件可以从以下位置安装： 🔨https://plugins.jetbrains.com/plugin/6351-dart • Java 版本 OpenJDK 运行时环境（内部版本 11.0.13+0-b1751.21-8125866）

[✓] VS 代码（版本 1.76.1） • VS Code 位于 /Applications/Visual Studio Code.app/Contents • Flutter 扩展版本 3.61.20230301

[✓] 连接的设备（2 个可用） • macOS（桌面） • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64 • Chrome（网络） • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] HTTP 主机可用性 • 所有必需的 HTTP 主机均可用

• 未发现问题！

最小可重现代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const CommonFieldsScreen());
}

class CommonFieldsScreen extends StatelessWidget {
  const CommonFieldsScreen({super.key});
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();
    final firstNameController = TextEditingController();
    final lastNameController = TextEditingController();

    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SizedBox(
                    width: 330,
                    child: Form(
                        key: formKey,
                        child: AutofillGroup(
                            child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextFormField(
                              controller: firstNameController,
                              decoration:
                                  const InputDecoration(hintText: 'First Name'),
                              autofillHints: const [AutofillHints.givenName],
                              validator: _requiredValidator,
                            ),
                            TextFormField(
                                controller: lastNameController,
                                decoration: const InputDecoration(
                                    hintText: 'Last Name'),
                                autofillHints: const [AutofillHints.familyName],
                                validator: _requiredValidator),
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(vertical: 16.0),
                              child: ElevatedButton(
                                onPressed: () {
                                  if (formKey.currentState?.validate() ??
                                      false) {
                                    firstNameController.clear();
                                    lastNameController.clear();
                                  }
                                },
                                child: const Text('Submit Form'),
                              ),
                            ),
                          ],
                        )))))));
  }

  String? _requiredValidator(String? value) {
    if (value == null || value.isEmpty) return 'Required';
    return null;
  }
}

使用

Flutter run --verbose

的错误日志：

[+141363 毫秒] 错误：意外的空值。 dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 抛出 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 561:63 nullCheck lib/_engine/engine/keyboard_binding.dart 369:38 [_handleEvent] lib/_engine/engine/keyboard_binding.dart 582:7handleEvent lib/_engine/engine/keyboard_binding.dart 97:25 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall lib/_engine/engine/keyboard_binding.dart 139:23loggingHandler dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall [+21 毫秒] 错误：意外的空值。 dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 抛出 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 561:63 nullCheck lib/_engine/engine/keyboard_binding.dart 369:38 [_handleEvent] lib/_engine/engine/keyboard_binding.dart 582:7handleEvent lib/_engine/engine/keyboard_binding.dart 100:25 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall lib/_engine/engine/keyboard_binding.dart 139:23loggingHandler dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39 dcall

我不认为我能做太多事情来解决这个问题，因为它似乎是一个内部 Flutter 错误。当我将小部件包裹在

KeyboardListener

内时，我什至无法检测到自动填充事件。

Answer 1

我也有这个问题。 2023.08.18 这是在电子邮件字段中，当我输入 1 个字母然后从提供的列表中选择电子邮件时引起的。

[✓] Flutter (Channel stable, 3.13.0, on Ubuntu 22.04.3 LTS 6.2.0-26-generic, locale en_CA.UTF-8)
    • Flutter version 3.13.0 on channel stable at /home/doug/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision efbf63d9c6 (3 days ago), 2023-08-15 21:05:06 -0500
    • Engine revision 1ac611c64e
    • Dart version 3.1.0
    • DevTools version 2.25.0


Error: Unexpected null value.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 855:63  nullCheck
lib/_engine/engine/keyboard_binding.dart 372:38                                   [_handleEvent]
lib/_engine/engine/keyboard_binding.dart 582:7                                    handleEvent
lib/_engine/engine/keyboard_binding.dart 98:18                                    <fn>
lib/_engine/engine/keyboard_binding.dart 140:16                                   loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39  dcall

我尝试编辑 ./snap/flutter/common/flutter/bin/cache/flutter_web_sdk/lib/_engine/engine/keyboard_binding.dart 中的文件 但没有效果。我找不到其他地方可以编辑它。

唯一的修复是不令人满意的：我注释掉了 AutofillHints: TextFormField 的一部分。