CODEWITHSUNDEEP
dartflutterautofill
Andre
Andre

Reputation: 7648

Flutter: password autofill

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?

Upvotes: 31

Views: 29678

Answers (4)

0xAPPA
0xAPPA

Reputation: 140

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

Upvotes: 3

Micheal C Wallas
Micheal C Wallas

Reputation: 525

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!

Upvotes: 6

Nils Reichardt
Nils Reichardt

Reputation: 3579

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

Upvotes: 65

Herbert Poul
Herbert Poul

Reputation: 4883

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:

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.

Upvotes: 6

Related Questions