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