Android Web Chrome中Flutter TextField提交事件触发异常问题

问题现象 #

在Android Web Chrome环境下，当TextFormField的keyboardType设为text或name类型时，onFieldSubmitted事件完全无法触发，导致提交请求无法发送；但将keyboardType改为TextInputType.emailAddress后，键盘上的提交键变为"右箭头"，onFieldSubmitted能正常触发，所有功能恢复正常。

相关代码 #

TextFormField(
  enabled: isEnabled ?? true,
  obscureText: isObscured ?? false,
  controller: controller,
  keyboardType: widget.keyboardType,
  textInputAction: widget.textInputAction,
  minLines: widget.minLines ?? 1,
  maxLines: widget.maxLines ?? 1,
  decoration: InputDecoration(
    fillColor: AppColors.fieldBackground,
    filled: true,
    hintText: widget.hintText,
    contentPadding: const EdgeInsets.only(
      top: (Dimens.buttonHeight - 14) / 2,
      bottom: (Dimens.buttonHeight - 14) / 2,
      left: Dimens.horizontalPadding,
      right: Dimens.horizontalPadding,
    ),
  ),
  onChanged: (value) {
    setState(() {
      textLength = value.length;
    });
  },
  focusNode: focusNode,
  onFieldSubmitted: (query) {
    if (query.length > 2 || query.isEmpty) {
      serviceLocator<SearchBloc>().add(
        FiltersChanged(query: query),
      );
      FocusScope.of(context).unfocus();
    } else {
      Messages.showInfoMessage(
          context,
          AppLocalizations.of(context)!.searchFieldShortQueryTitle,
          AppLocalizations.of(context)!.searchFieldShortQueryMessage);
    }
  },
);

原因分析 #

1. Android Chrome的键盘行为差异：
   • 当keyboardType为text或name时，Chrome默认渲染的是带有"换行"功能的按键，点击该键只会尝试在输入框中插入换行（但你的输入框是单行模式，所以视觉上无反应），不会触发Flutter的onFieldSubmitted回调。
   • 当keyboardType设为emailAddress时，Chrome识别到这是需要完成提交的输入场景，会自动将键盘按键替换为"提交/下一步"样式的右箭头，点击时会正确触发Flutter的提交事件。
2. textInputAction参数缺失明确配置：
   你的代码中textInputAction是通过外部传入的widget.textInputAction，如果这个参数没有显式设置为TextInputAction.search、TextInputAction.done这类提交型动作，会导致Chrome无法正确识别输入框的提交意图，进一步加剧事件无法触发的问题。

解决方案 #

方案1：显式指定textInputAction（推荐） #

不管keyboardType是什么类型，直接将textInputAction设置为提交类动作，强制Chrome显示提交按键并触发事件：

TextFormField(
  // ...其他原有参数
  textInputAction: TextInputAction.search, // 或TextInputAction.done、TextInputAction.go
  keyboardType: widget.keyboardType, // 即使是text/name类型也能正常触发提交
  // ...
)

方案2：监听键盘按键（备选） #

如果需要保留原有键盘布局且无法修改textInputAction，可以通过RawKeyboardListener监听键盘的Enter键事件，手动触发提交逻辑：

RawKeyboardListener(
  focusNode: focusNode,
  onKey: (event) {
    if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
      // 手动调用onFieldSubmitted的逻辑
      final query = controller.text;
      if (query.length > 2 || query.isEmpty) {
        serviceLocator<SearchBloc>().add(FiltersChanged(query: query));
        FocusScope.of(context).unfocus();
      } else {
        Messages.showInfoMessage(
            context,
            AppLocalizations.of(context)!.searchFieldShortQueryTitle,
            AppLocalizations.of(context)!.searchFieldShortQueryMessage);
      }
    }
  },
  child: TextFormField(
    // ...原有TextFormField参数
  ),
)

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