How to enable password managers autofill feature for flutter apps?

Question

we're currently developing a Flutter app (Dart language).

There is a Login Screen with two TextField's.

The password field has

obscureText: true,

as property, which hides any input.

Password Manager

More and more people are using password manager like 1password.
How can we enable this feature in flutter?

Like this:

Currently the popup doesn't show. Nothing found on the official docs, maybe there is a google documentation about it in general?

Thanks for any help!!

Check out the [Autofill framework](https://developer.android.com/guide/topics/text/autofill). Also, you can follow [this issue](https://github.com/flutter/flutter/issues/13015) for native support. — Kirollos Morkos, Oct 27 '18 at 20:15
Thanks. Looks like there is a bigger issue related to that.. Will wait until a new buildroot was created.. — Favnyr, Oct 28 '18 at 11:19
This question is duplicate of: https://stackoverflow.com/questions/55633695/flutter-password-autofill/61939545#61939545 — Nils Reichardt, May 25 '20 at 11:43

score 2 · Answer 1 · edited Jun 01 '21 at 10:37

2

Check out the platform_inputs package: https://pub.dev/packages/platform_inputs

Their code sample seems to match your problem, it shows how when a textfield's textContentType is set to TextContentType.password with this package it will show the native password message.

edited Jun 01 '21 at 10:37

Niraj Shah

15,087
3
41
60

answered Apr 17 '20 at 07:05

Benjamin Swerdlow

80
1
3

7

package has been DISCONTINUED. – Stellar Creed Aug 19 '21 at 09:46

score 0 · Answer 2 · answered Jun 05 '23 at 14:21

I'm having similar problem in a flutter web app.

Turns out some modern browsers (chromium Firefox) do not autofill saved passwords inside a shadow-root.

The only workaround I've found so far is to force your app to not use shadow-root by editing embedder.dart¹ at _createHostNode function to not use shadow-root

¹ mine was found at: ~/snap/flutter/common/flutter/bin/cache/flutter_web_sdk/lib/_engine/engine/embedder.dart

my build server - using cirrusci/flutter docker image had it at /sdks/flutter/bin/cache/flutter_web_sdk/flutter_web_sdk/lib/_engine/engine/embedder.dart

score 0 · Answer 3 · answered Aug 17 '23 at 08:43

Wrap your TextFields with a AutofillGroup widget, then mark your TextFields with appropriate AutofillHints as in the example code below. Then Google's Autofill framework will show suggestions for filling both email and password automatically.

            return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: AutofillGroup(
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        TextField(
                          autofillHints: [AutofillHints.email],
                          hintText: "Email address",
                        ),
                        const SizedBox(
                          height: 16,
                        ),
                        TextField(
                          hintText: "Password",
                          autofillHints: [AutofillHints.password, AutofillHints.newPassword],
                        ),
                       ]
              )));

The screenshot below shows the result:

How to enable password managers autofill feature for flutter apps?

3 Answers3