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 中创建带有自动完成标签的表单？

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)。

Flutter web 包含自动完成

Flutter web Include autocomplete

google-chrome

flutter

flutter-web