Flutter web包含自动完成功能。

Question

我已经在Flutter Web中创建了一个登录表单，当我登录时，Chrome浏览器会检测到输入的密码，但只提供保存密码的选项，用户名则保持为空。

Google建议使用以下HTML表单，以便凭据管理器可以检测到需要存储的凭据。

<form id="signup" method="post">
 <input name="email" type="text" autocomplete="username email">
 <input name="display-name" type="text" autocomplete="name">
 <input name="password" type="password" autocomplete="new-password">
 <input type="submit" value="Sign Up!">
</form>

在我的表单中，我同时使用了电子邮件和用户名，但是Chrome凭据管理器仍然无法检测到用户名。

我们如何在Flutter Web中使用自动完成标签创建表单？

- max

---

这个问题已经在Github上开放了，所以修复需要一些时间。请关注这个问题链接。 - Abhilash Chandran

希望他们也能添加网络支持。 - max

这个问题附有平台网络标签，意味着它将被处理。请查看该问题的最后一条评论... :) - Abhilash Chandran

奇怪的是，使用最新的Flutter主通道框架，自动完成字段已正确设置，但仍未被Chrome识别，有其他人尝试过吗？ - Qiong Wu

Answer 1

Flutter现在支持自动填充（密码、电子邮件、用户名等）☑️ 合并的拉取请求示例：https://github.com/flutter/flutter/pull/52126

示例：

 @override
  Widget build(BuildContext context) {
    return AutofillGroup(
      child: Column(
        children: <Widget>[
          TextField(controller: username, autofillHints: [AutofillHints.username]),
          Checkbox(
            value: isNewUser,
            onChanged: (bool newValue) {
              setState(() { isNewUser = newValue; });
            },
          ),
          if (isNewUser) TextField(controller: newPassword, autofillHints: [AutofillHints.newPassword]),
          if (isNewUser) TextField(controller: repeatNewPassword, autofillHints: [AutofillHints.newPassword]),
          if (!isNewUser) TextField(controller: password, autofillHints: [AutofillHints.password]),
        ],
      ),
    );
  }

你可能需要切换到dev或master频道 (flutter channel master)。

- Nils Reichardt

---

它是否已经在Web上实现了？这里的示例： https://api.flutter.dev/flutter/widgets/AutofillGroup-class.html ...似乎无法自动填充任何内容（对于桌面版Chrome） - user48956

它应该适用于Flutter Web，但对我个人来说非常有bug。我在GitHub上创建了一个问题：https://github.com/flutter/flutter/issues/61301。也许你可以点赞并评论你的问题。 - Nils Reichardt

如果控制器是您传递给外部小部件的参数（即TextFormField是接收控制器的外部小部件），该怎么办？我正在尝试使用autofillHints：[AutofillHints [controller]]，其中控制器是一个变量，但它不接受它。 - user3808307

@user3808307 我认为你应该创建一个自定义实现，例如：class MyCustomController { final TextEditingController controller; final Iterable<String>? autofillHints; const MyCustomController( this.controller, this.autofillHints, ); } - Adnan

截至目前，Flutter Web（2.2.3）中的autoFillHints参数无法使用。 - Brandon Pillay

autofillHints: const [AutofillHints.email]，在这一行中我应该使用哪个关键字？我遇到了错误。类型“AutofillHints”没有定义' email '的getter。尝试导入定义' email '的库，将名称更正为现有getter的名称，或定义名为' email '的getter或字段。 - Hari .S