Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Password autofill for login fields

Password managers can fill your login screen with one tap. The OS only needs to know what each field is, and Flutter doesn't tell it by default.

Two things fix that, autofillHints on each field and an AutofillGroup around them:

AutofillGroup(
  child: Column(
    children: [
      TextField(
        autofillHints: const [
          .username,
          .email,
        ],
        keyboardType: .emailAddress,
      ),
      TextField(
        autofillHints: const [
          .password
        ],
        obscureText: true,
      ),
    ],
  ),
)

The hints tell the OS what each field expects. The group links the fields into one credential, so tapping the suggestion fills email and password together.

AutofillHints.username does more than filling saved logins: OS suggests the user's email addresses above the keyboard even when nothing is saved yet.

For sign up and password reset, use AutofillHints.newPassword instead of password. Then OS offers a generated strong password right on the keyboard.

Some hints only work with a matching keyboardType. AutofillHints.email needs TextInputType.emailAddress, and AutofillHints.name needs TextInputType.name.

Filling is only half of it. Getting the typed password saved into the manager needs one more call, that's the next detail.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me