Flutter Web中TextFormField无法触发密码自动填充建议问题

问题现象 #

• 接入Google密码管理器实现邮箱、密码自动填充功能，Android端运行正常，Web端存在功能异常
• 现有实现下，点击登录按钮时Chrome浏览器可正常弹出密码管理器保存提示，支持保存当前输入的邮箱、密码，保存后可正常跳转至首页
• 核心异常：再次进入登录页时，虽已成功保存对应账号密码，但点击输入框既不会自动填充已保存内容，也不会展示任何填充建议
• 前置确认：已完成谷歌账号绑定并开启同步功能，普通网站可正常展示自动填充建议，该效果在当前Flutter Web应用中无法复现

复现代码 #

Form(
    key: key,
    child: AutofillGroup(
      child: Column(
        children: [
          TextFormField(
            autofillHints: const [AutofillHints.email],
            keyboardType: TextInputType.emailAddress,
            textInputAction: TextInputAction.next,
          ),
          TextFormField(autofillHints: const [AutofillHints.password],),
          ElevatedButton(
            onPressed: (){
              TextInput.finishAutofillContext();
              Navigator.of(context).pushReplacementNamed('/home');
            },
            child: const Text('Login'),
          ),
        ],
      ),
    ),
  )

修复方案 #

按优先级依次调整以下配置：

1. 补全自动填充Hint值
   Chrome密码管理器对登录页的账号字段优先识别username标识，仅配置AutofillHints.email无法被正确关联到已保存的密码条目，这是Flutter Web端自动填充失效的最高频诱因。将邮箱字段的autofillHints修改为同时包含用户名标识：

autofillHints: const [AutofillHints.email, AutofillHints.username],

密码字段保持AutofillHints.password即可，编译为Web后会自动映射为标准的autocomplete="current-password"属性。

2. 调整finishAutofillContext调用时序
   现有代码在路由跳转前同步调用上下文结束方法，Web端浏览器还未完成表单与密码条目的关联就被跳转打断，导致保存的密码无法和当前登录页绑定。将跳转逻辑做短延迟处理，等待浏览器完成上下文同步：

onPressed: () async {
  TextInput.finishAutofillContext();
  // 等待Chrome完成密码条目与页面的关联绑定
  await Future.delayed(const Duration(milliseconds: 150));
  if (context.mounted) {
    Navigator.of(context).pushReplacementNamed('/home');
  }
}

3. 排查DOM结构干扰

• 若使用了第三方UI组件库，确认组件未对表单区域开启Shadow DOM隔离，Shadow DOM会导致Chrome密码管理器无法遍历到内部的输入框元素
• 不要通过preventDefault完全拦截表单的原生提交事件，可给登录按钮补充原生form提交触发逻辑，辅助Chrome识别当前动作为登录提交。

验证注意：修改配置后先清空浏览器中当前站点已保存的密码数据，重新走一次密码保存流程，重启页面后即可正常触发自动填充建议。

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