Flutter Web中TextFormField在Android谷歌内置浏览器输入错乱问题

问题现象 #

• 在Google Chat、Gmail内置浏览器，或是将Flutter Web应用从Chrome安装到主屏幕后，输入邮箱地址等特定字符组合时，TextFormField出现严重输入错乱（如文字重叠、光标错位），但直接在Chrome浏览器中输入显示正常。
• 涉事代码：

TextFormField(
  decoration: const InputDecoration(labelText: 'Email'),
  controller: email,
  textInputAction: TextInputAction.next,
)

• 输入错乱截图：

修复方案 #

1. 明确输入类型并添加验证逻辑 #

给TextFormField指定邮箱输入类型，帮助Flutter Web适配特殊浏览器的输入处理逻辑，同时添加自动验证增强输入稳定性：

TextFormField(
  decoration: const InputDecoration(labelText: 'Email'),
  controller: email,
  textInputAction: TextInputAction.next,
  keyboardType: TextInputType.emailAddress,
  autovalidateMode: AutovalidateMode.onUserInteraction,
)

2. 调整输入框装饰样式 #

通过设置isDense和自定义内边距，避免内置浏览器的样式渲染冲突：

TextFormField(
  decoration: const InputDecoration(
    labelText: 'Email',
    isDense: true,
    contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
  ),
  controller: email,
  textInputAction: TextInputAction.next,
  keyboardType: TextInputType.emailAddress,
)

3. 升级Flutter SDK版本 #

这类浏览器适配问题多为Flutter Web的已知bug，官方在后续稳定版（如3.10及以上版本）中针对内置浏览器的输入兼容性做了大量修复，升级到最新版大概率能解决问题。

4. 嵌入原生HTML输入组件（极端场景） #

如果上述方案无效，可以通过HtmlElementView使用原生HTML输入框，绕过Flutter Web的输入渲染层：

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class EmailInput extends StatefulWidget {
  final TextEditingController controller;
  const EmailInput({super.key, required this.controller});

  @override
  State<EmailInput> createState() => _EmailInputState();
}

class _EmailInputState extends State<EmailInput> {
  @override
  void initState() {
    super.initState();
    ui.platformViewRegistry.registerViewFactory(
      'email-input',
      (int viewId) => InputElement()
        ..type = 'email'
        ..placeholder = 'Email'
        ..style.border = '1px solid #ced4da'
        ..style.borderRadius = '4px'
        ..style.padding = '12px 16px'
        ..onChange = (e) {
          widget.controller.text = (e.target as InputElement).value;
        },
    );
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'email-input');
  }
}

关于Flutter Web生产环境可用性 #

目前Flutter Web已经具备生产环境使用条件，仅在部分小众浏览器（如Google Chat/Gmail内置浏览器）的边缘场景存在适配问题。这类问题多由特定浏览器的渲染引擎差异导致，并非Flutter Web整体不成熟，通过上述适配方案基本可以覆盖绝大多数用户场景。

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