Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 350
Andrea Miotto Avatar asked Apr 11 '19 13:04

Andrea Miotto


People also ask

Is autofill available in flutter?

As mentioned in the release announcement, autofill has been one of the #1 most requested Flutter features for a while, and we finally get it, for both Android and iOS (web is on the way, and we don’t have autofill ecosystem on desktop yet).

How do I enable autofill on my Device?

Check the device's system settings and make sure autofill is turned on, and there are available credentials stored in the autofill service. iOS password autofill: Go to Settings -> Password, turn on "Autofill Passwords", and add new passwords for testing by pressing the top right "+" button.

How to add a passwordfield to a flutter project?

A simple and easy to use flutter package to add a passwordfield to your Flutter project. Getting Started # Installation # Add the dependency; dependencies: passwordfield: ^0.0.82 flutter: Import the package; import 'package:passwordfield/passwordfield.dart'; Voila! use the Widget; PasswordField();

What are autofillhints and how do I use them?

For example, this can be used to prevent users from entering letters in a phone number field and saves you from having to account for unexpected submissions. The autofillHints is used to control what autofill suggestion the user sees when they’re filling out the form.


3 Answers

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]),
        ],
      ),
    );
  }
like image 104
Nils Reichardt Avatar answered Oct 21 '22 22:10

Nils Reichardt


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.

like image 36
Herbert Poul Avatar answered Oct 22 '22 00:10

Herbert Poul


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!

like image 2
Micheal C Wallas Avatar answered Oct 22 '22 00:10

Micheal C Wallas