How to properly make TextFields work with autofill on Flutter Web?

Viewed 690

This code seemed to work before, however now I can't get the autofill on web to work. Chrome will display a little key on the url bar that lets the user save the password (no big save-password popup though), but then it has no effect on revisiting the page.

Code:

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {


  final userNameController = TextEditingController();
  final passController = TextEditingController();
  String errorText = '';

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
 
      body: Center(
        child: AutofillGroup(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              loginPageTextField('Username', userNameController),
              SizedBox(height: 20),
              loginPageTextField('Password', passController, isPassword: true),
              SizedBox(height: 10),
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Text(errorText,
                      style: TextStyle(fontSize: 12, color: Colors.red)),
                ),
              ),
         
       ElevatedButton(
                      child: Text('Log in',
                          style: TextStyle(fontWeight: FontWeight.bold)),
      
                      onPressed: () async {
                     (...))
                      },
                    )
            ],
          ),
        ),
      ),
    );
  }

  Container loginPageTextField(
      String placeholder, TextEditingController controller,
      {bool isPassword = false}) {
    return Container(
      width: 220,
      height: 40,
      child: TextField(
          keyboardType:
              (isPassword) ? TextInputType.text : TextInputType.name,
          onEditingComplete: (isPassword)
              ? () {
                  TextInput.finishAutofillContext();
                }
              : () {},
          autofillHints:
              isPassword ? [AutofillHints.password] : [AutofillHints.username],
          obscureText: isPassword ? true : false,
          textAlignVertical: TextAlignVertical.center,
          style: TextStyle(fontSize: 13),
          textAlign: TextAlign.center,
          decoration: _textFieldStyle(placeholder),
          controller: controller),
    );
  }
}

The funniest thing is I could swear it worked before. Only realized it doesn't when users pointed out not being able to save credentials. Things tried:

  • Moving the TextFields to be embedded directly in the AutofillGroup instead of an external widget,
  • adding/removing various keyboard types,
  • changing to TextFormField,
  • using AutofillHints.newPassword instead of .password on the pass field
  • testing in different browsers

Nothing seems to work - the 'save password' popup is not displayed and login details are not filled/proposed on visiting the page. The only way the credentials are acknowledged by the browser is the little key on Chrome url bar.

Please help!

0 Answers
Related