Flutter auto fill not working on text field

Question

I cannot make auto fill in Flutter working at all, for any type of hint. I copied the Flutter's example code with a little modification.

  bool isSameAddress = true;
  final TextEditingController email = TextEditingController();
  final TextEditingController billingAddress1 = TextEditingController();
  final TextEditingController billingAddress2 = TextEditingController();

  final TextEditingController creditCardNumber = TextEditingController();
  final TextEditingController creditCardSecurityCode = TextEditingController();

  final TextEditingController phoneNumber = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        const Text('Email'),
        AutofillGroup(
          child: Column(
            children: <Widget>[
              TextField(
                controller: email,
                autofillHints: <String>[AutofillHints.email],
              ),
            ],
          ),
        ),
        const Text('Billing address'),
        Checkbox(
          value: isSameAddress,
          onChanged: (bool newValue) {
            setState(() { isSameAddress = newValue; });
          },
        ),
        // Again the address fields are grouped together for the same reason.
        if (!isSameAddress) AutofillGroup(
          child: Column(
            children: <Widget>[
              TextField(
                controller: billingAddress1,
                autofillHints: <String>[AutofillHints.streetAddressLine1],
              ),
              TextField(
                controller: billingAddress2,
                autofillHints: <String>[AutofillHints.streetAddressLine2],
              ),
            ],
          ),
        ),
        const Text('Credit Card Information'),
        // The credit card number and the security code are grouped together as
        // some platforms are capable of autofilling both fields.
        AutofillGroup(
          child: Column(
            children: <Widget>[
              TextField(
                controller: creditCardNumber,
                autofillHints: <String>[AutofillHints.creditCardNumber],
              ),
              TextField(
                controller: creditCardSecurityCode,
                autofillHints: <String>[AutofillHints.creditCardSecurityCode],
              ),
            ],
          ),
        ),
        const Text('Contact Phone Number'),
        // The phone number field can still be autofilled despite lacking an
        // `AutofillScope`.
        TextField(
          controller: phoneNumber,
          autofillHints: <String>[AutofillHints.telephoneNumber],
        ),
      ],
    );
  }

But no autofill dropdown was shown for any type of hint. I've turned on Autofill service on the device (using Google's autofill service) and the autofill itself works with other apps.

What's wrong with the code? Is there anything missing that causes the autofill disabled?

Note: I use Flutter 1.20.4 and Android 10

Answer 1

What was missing for me is this migration https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects. Notably, your MainActivity needs to extend io.flutter.embedding.android.FlutterActivity and not io.flutter.app.FlutterActivity.

Also, as you already mentioned, you need to configure an AutoFill service in the system settings.

Working sample code:

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text("Login"),
    ),
    body: AutofillGroup(
        child: Column(
      children: [
        TextField(
          autofillHints: [AutofillHints.email],
          keyboardType: TextInputType.emailAddress,
        ),
        TextField(
          autofillHints: [AutofillHints.password],
          keyboardType: TextInputType.text,
        ),
      ],
    )));

Username instead of email should work similarly.