Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Save passwords to the password manager

To get the typed login saved into the password manager, wrap the fields in an AutofillGroup and set onDisposeAction to cancel. The default tries to save whenever the screen is left, even after a failed sign in:

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

Then trigger the save after the sign in succeeds:

final bool success = await auth.signIn(email, password);
if (success) {
  TextInput.finishAutofillContext();
  // navigate away
}

Also call it after a successful password reset, so the manager updates the saved entry.

On iOS the credential gets saved under your app's name. To tie it to your domain instead, so the same login also fills on your site in Safari, add the Associated Domains capability in Xcode with webcredentials:yourdomain.com, and serve this file at yourdomain.com/.well-known/apple-app-site-association with the application/json content type:

{
  "webcredentials": {
    "apps": ["TEAMID.com.example.app"]
  }
}

Getting the fields filled in one tap is covered in Password autofill for login fields.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me