Flutter Web: Autofill password suggestions not triggered in TextFormField

Question

I'm trying to get email and password autofilled using the Google Password Manager. This seems to work on Android, but not for Web.

Example:

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'),
          ),
        ],
      ),
    ),
  ),

When I press the "Login" button, the browser(Google Chrome) shows a pop-up that allows me to save email and password using the password manager, and then go to the Home screen.

The problem is when I try to login again: The email and password are saved, but they aren't autofilled, or not even displayed as suggestions when I click any field. Pop-up

Note: I have already linked the google account and turned on the sync.

Screenshot: Common website with autofill and suggestions behavior This isn't working in my app.

autofillHints: const [AutofillHints.email], which keyword i should use in this line. i am getting error. The getter 'email' isn't defined for the type 'AutofillHints'. Try importing the library that defines 'email', correcting the name to the name of an existing getter, or defining a getter or field named 'email'. — Hari .S, Jan 15 '23 at 09:56

score 4 · Answer 1 · answered Jun 25 '22 at 05:25

4

Someone on GitHub has already filed this issue (No Autofill Suggestions) on Flutter Repository

Issue is in Open State on Flutter's Official Repository. You can check for the updates on that here

Hope it helps.

answered Jun 25 '22 at 05:25

Milan Surelia

884
1
8
18

score 0 · Answer 2 · answered Aug 31 '23 at 08:28

Using AutofillGroup with autofillHints in textfield works. You can find the code here by flutter campus.

AutofillGroup(
  child:Column(
    children: [
        TextField(
            autofillHints: [AutofillHints.username],
            decoration: InputDecoration(
              hintText: "Username"
            ),
        ),

        TextField(
            obscureText: true,
            autofillHints: [AutofillHints.password],
            decoration: InputDecoration(
              hintText: "Password"
            ),
        ),
    ],
  )
)

Flutter Web: Autofill password suggestions not triggered in TextFormField

2 Answers2