CODEWITHSUNDEEP
androidiosdartflutterautofill
Favnyr
Favnyr

Reputation: 353

How to enable password managers autofill feature for flutter apps?

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:

Example in other App

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!!

Upvotes: 16

Views: 7784

Answers (3)

alierdogan7
alierdogan7

Reputation: 840

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:

enter image description here

Upvotes: 4

Ohad Cohen
Ohad Cohen

Reputation: 6144

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.dart1 at _createHostNode function to not use shadow-root

1 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

Upvotes: 1

Benjamin Swerdlow
Benjamin Swerdlow

Reputation: 78

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.

Upvotes: 2

Related Questions