Autofill support

We should make sure our text fields trigger the autofill support:
https://developer.android.com/guide/topics/text/autofill.html

Doesn't the Autofill framework work whenever an input is recognized natively?
Why aren't they? I can easily paste into them. Shouldn't something like

new TextFormField(
  keyboardType: TextInputType.emailAddress
  ...
)

do the trick?

fwiw, I have the following form:

          Form(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: new InputDecoration(
                      hintText: "Email",
                      labelText: "Email"
                    ),
                  ),
                  TextFormField(
                    obscureText: true,
                    decoration: new InputDecoration(
                      labelText: "Password"
                    ),
                  )
                ],
              )
            ),

And 1Password doesn't seem to be triggering.

The Android auto-fill framework wasn't added until SDK 26, so I doubt we support it currently since Flutter's target SDK is still 22

We will definitely have to support it. We will just have to call back to nothing on older Androids.

Similarly we should ensure that we support the same for the password field changes in iOS 11 (may already work?) and the upcoming changes in iOS 12.

@nturgut

@nturgut Is the "save" solution merged? Is it tracked using this issue or there is some other issue?

Wondering if anyone else has this autofill problem.

On iOS, when I have multiple text fields on a screen with different autofill hints, tapping between the text fields does not update the autofill correctly. Sometimes the autofill just doesn't show up. Sometimes the first autofill item just stays and never switches. Sometimes when I leave the app and come back, all the autofills have change to "Passwords" with the key icon.

Might be related to #59374

Wondering if anyone else has this autofill problem.

On iOS, when I have multiple text fields on a screen with different autofill hints, tapping between the text fields does not update the autofill correctly. Sometimes the autofill just doesn't show up. Sometimes the first autofill item just stays and never switches. Sometimes when I leave the app and come back, all the autofills have change to "Passwords" with the key icon.

Might be related to #59374

Yep, same here.

@nturgut

@nturgut Is the "save" solution merged? Is it tracked using this issue or there is some other issue?

Save solution is merged. Sorry I just saw this cc.

@jacob-hutchings

@jacob-hutchings @stx thanks for reporting this issue! What's your flutter version? From the screenshot it seems it happens on non-password fields right? For those fields I think we reuse the same ios view and I've never had this issue, but it's possible ios autofill caches the content type internally. Could you provide a minimal repro for investigation?

@jacob-hutchings

@jacob-hutchings @stx thanks for reporting this issue! What's your flutter version? From the screenshot it seems it happens on non-password fields right? For those fields I think we reuse the same ios view and I've never had this issue, but it's possible ios autofill caches the content type internally. Could you provide a minimal repro for investigation?

Thank you for looking at this @LongCatIsLooong !

Here is my Flutter version info:

Flutter (Channel stable, 1.20.2, on Mac OS X 10.15.4 19E287, locale en-US)

I tested the following code on my physical iPhone 8 and also the iOS simulator iPhone SE (2nd Gen). Autofill straight up never works with the following code for me:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Autofill repro',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _firstNameController = TextEditingController();
  TextEditingController _lastNameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Autofill repro'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _firstNameController,
              decoration: InputDecoration(
                hintText: 'Given Name',
              ),
              autofillHints: [AutofillHints.givenName],
            ),
            TextField(
              controller: _lastNameController,
              decoration: InputDecoration(
                hintText: 'Family Name',
              ),
              autofillHints: [AutofillHints.familyName],
            ),
          ],
        ),
      ),
    );
  }
}

I repeatedly tested this, rebuilding, force quitting and launching, and it never showed.

After adding autocorrect: false, to the text fields and testing a bunch more times:

I could sometimes get autofill to show but not very often.
If I type in some text and backspace it all the way, autofill shows up pretty regularly, however, after it shows up, switching between the text fields does not update the autofill:

After testing tens of times I finally got it to update one time, but I'm not sure how I got it to work.

The behavior is very inconsistent.

Please let me know if there is additional info you need.

My login form is defined as follows:

Form buildLoginForm() {
    final citiesListControl = buildCitiesSelector();

    final email = TextFormField(
      enabled: _isCitySelected,
      keyboardType: TextInputType.emailAddress,
      key: Key('email'),
      autofocus: false,
      initialValue: '',
      decoration: InputDecoration(
        hintText: 'E-mail',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
          borderRadius: BorderRadius.circular(32.0),
        ),
      ),
      onSaved: (value) => _email = value,
      validator: (val) => !EmailValidator.Validate(val, true)
          ? Strings.msg_email_invalid
          : null,
        autofillHints: [AutofillHints.email]
    );

    final password = TextFormField(
      enabled: _isCitySelected,
      key: Key('password'),
      autofocus: false,
      initialValue: '',
      obscureText: true,
      decoration: InputDecoration(
        hintText: Strings.password_hint,
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
          borderRadius: BorderRadius.circular(32.0),
        ),
      ),
      onSaved: (value) => _password = value,
      validator: (val) =>
          val.length < 4 ? Strings.msg_password_too_short : null,
        autofillHints: [AutofillHints.password]
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 2.0),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24.0),
        ),
        onPressed: _isCitySelected
            ? () {
                if (_loginFormKey.currentState.validate()) {
                  _loginFormKey.currentState.save();
                  _loginEmailPassword();
                }
              }
            : null,
        padding: EdgeInsets.all(12.0),
        color: Colors.lightBlueAccent,
        child: Text(Strings.btn_login, style: TextStyle(color: Colors.white)),
      ),
    );

    final guestLoginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 0.0),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24.0),
        ),
        onPressed: _isCitySelected
            ? () {
                _loginFormKey.currentState.save();
                _loginGuest();
              }
            : null,
        padding: EdgeInsets.all(12.0),
        color: Colors.green,
        child: Text(Strings.btn_login_guest,
            style: TextStyle(color: Colors.white)),
      ),
    );

    final statusLabel = Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Text(_status ?? "", style: TextStyle(color: Colors.red)));

    return Form(
      key: this._loginFormKey,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: ListView(
            shrinkWrap: true,
            padding: EdgeInsets.only(left: 24.0, right: 24.0),
            children: <Widget>[
              citiesListControl,
              SizedBox(height: 32.0),
              email,
              SizedBox(height: 8.0),
              password,
              SizedBox(height: 24.0),
              loginButton,
              guestLoginButton,
              statusLabel
            ],
          ),
        ),
      ),
    );
  }

On Android, I am never getting any autofill. Is that anything wrong in my code? Issue is closed, so I guess functionality is finished, so what's wrong?

I expected autfill like this: https://youtu.be/DvvaxPTBoxQ?t=183 but it never shows. What am I doing wrong?

Every post I saw about Autofill they wrap the Widget were the TextInputFields in with an AutofillGroup. I does it the same way and it works fine.
So maybe that would solve the problems.
Also for iOS you need to define an Runner.entitlements file with associated domains and webcredentials to be able to use them.

Wrapping with AutofillGroup seems to do the magic. Also, in order to be able to see "save data" pop-up I had to use Form and save it on submit / successful login.
Tested on Android with autofill services:

Google - save data worked, update password didn't worked.
Samsung Pass - none worked.

Have you managed to make it working with other password managers?

Wrapping with AutofillGroup seems to do the magic. Also, in order to be able to see "save data" pop-up I had to use Form and save it on submit / successful login.
Tested on Android with autofill services:

Google - save data worked, update password didn't worked.

Samsung Pass - none worked.

Have you managed to make it working with other password managers?

Ref this issue #55613 (comment).
This feature not release stable channel.

I tried to wrap Form or ListView with AutofillGroup but still no autofill shown.

Hello, it works !!! Wrap the fields with AutoFillGroup and add to each field your autoFillHint is magic in web. The autocomplete with email and password started to work. Thanks

AutofillGroup is the magic

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Autofill support #13015

53 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Autofill support #13015

Description

Activity

acidjazz commented on Mar 2, 2018

orospakr commented on Jun 1, 2018

jonahwilliams commented on Jun 4, 2018

Hixie commented on Jun 5, 2018

jonahwilliams commented on Jun 5, 2018

cbracken commented on Jun 5, 2018

jonahwilliams commented on Jun 6, 2018

53 remaining items

max202021 commented on Jun 22, 2020

jacob-hutchings commented on Aug 17, 2020

stx commented on Aug 17, 2020

nturgut commented on Aug 17, 2020

LongCatIsLooong commented on Aug 17, 2020

jacob-hutchings commented on Aug 17, 2020

giaur500 commented on Aug 18, 2020

bierbaumtim commented on Aug 18, 2020

mbaleczny commented on Aug 19, 2020

abc873693 commented on Aug 19, 2020

giaur500 commented on Sep 3, 2020

bochigarcia commented on Sep 8, 2020

lukepighetti commented on Mar 5, 2021

github-actions commented on Aug 5, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions