Flutter: password autofill

Question

I'm looking for a way to enable the autofill for a password textfield in a login form

As a backup solution, I was thinking to save the password in the secure storage, and then, with the biometrics, recovering the same password when a new login is performing.

But this won't cover all the autofill password experiences from iOS 12. For example the password won't be saved across multiple devices.

Any tips?

Berard

Answer 1

Auto-Fill is not yet supported in flutter out of the box. There are two issues i know of which are tracking this issue (although android related). You might want to subscribe/vote on those:

• https://github.com/flutter/flutter/issues/13015
• https://github.com/flutter/flutter/issues/14047

I fear it won't be easy to trigger this functionality via a 3rd party plugin though.

As for your question regarding secure storage: If you are using the flutter secure storage plugin which uses the keychain on iOS, it should be synced across devices via iCloud.

Drennen

Answer 2

Flutter supports now autofill (password, email, username, etc.) ☑️ The merged pull request with an example: https://github.com/flutter/flutter/pull/52126

Example:

 @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]),
        ],
      ),
    );
  }

Rationale

Is using AutofillGroup mandatory to make this work? Or does it also work without? – Nunes

@LOLWTFasdasdasdad It should work without AutofillGroup, but the UX is better if you use it. Read more about it here – Solder

I still can't don't get anything auto-filled. – Commorant

I solved with migrating to flutterEmbedding v2, big thanks to https://mcmap.net/q/470616/-flutter-auto-fill-not-working-on-text-field. – Commorant

In my case I use AutofillHints.username and AutofillHints.password. If I tap on the username text field, choose the stored username + password and let it be filled, it doesn't automatically fill the password text field - I have to repeat the process. What needs to be changed to automatically achieve this? – Mckenzie

@Mckenzie did you manage to make all the fields be filled in one swoop? – Churchwoman

This doesn't work with SDK 2.10.0, I've tried with a sample app. – Constriction

Answer 3

I had an autofill on both an email input and password input on the same page. The autofill was only showing on the password field.

I had to wrap the TextFields in an AutoFillGroup for them to show on both!

Littlefield

Answer 4

If you want to autofill fields that are not email/username or password it is enough to use autofillHints and keyboardType on your TextFormField.

To make credentials autofill work on iOS, you must first setup associated domains and then wrap your input fields with AutofillGroup. (only wrapping single TextFormFields seems not to work, don't know why atm)

AutofillGroup(
  child: Column(
    children: [
      TextFormField(
        autofillHints: [AutofillHints.email],
        keyboardType: TextInputType.emailAddress,
        decoration: InputDecoration(
          hintText: 'Email',
          labelText: 'Email',
      ),
      TextFormField(
        autofillHints: [AutofillHints.newPassword],
        keyboardType: TextInputType.visiblePassword,
        decoration: InputDecoration(
          hintText: 'Password',
          labelText: 'Password',
      )
    ],
  ),
)

Fondue