[Web] can’t make register form where chrome will recognize username(email)

Steps to Reproduce

  1. Clone https://github.com/matanshukry/tmp-ex-login
  2. Run the example: flutter run -d chrome
  3. Click the Create Account button (looks like link)
  4. Enter random details, e.g. email matanshukry@gmail.com, password Aa123456
  5. Optional: Click the SIGN UP button.
  6. Click the “key” icon in the url bar on chrome browser. That will allow you to check what chrome currently detects as username/password.
  7. You can see the password is correctly filled, but the username is blank.
    image

Note: step 5 is optional because the validation can be seen both before and after submitting the form.

Expected results:
The username should be filled. That is, the fields should be set in a way that allow chrome to correctly detect and use the username field.

Actual results:
Chrome can’t detect the username field. I tried to add autofillHints, which successfully added some details to the input, but the result is the same.

Logs

$ flutter doctor -v
[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19044.1586], locale en-US)
    • Flutter version 2.10.4 at C:\ProgramFiles\Flutter\SDK
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (30 hours ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\ProgramFiles\Android\SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = C:\ProgramFiles\Android\SDK
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.8)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.32002.261
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[√] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.3.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code, 64-bit edition (version 1.63.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (2 available)
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 99.0.4844.82
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 99.0.1150.46

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

1 thought on “[Web] can’t make register form where chrome will recognize username(email)

  1. @maheshmnj yes and no.
    Actually the issue I reported can be solved by using AutofillGroup (I wasn’t familiar with it).

    Now chrome correctly saves the data.

    But now I’m encountering the 2nd issue that you linked, where chrome doesn’t restore it (for both username and password).
    Upvoted and will follow that – thanks!

Comments are closed.