How to make a Flutter Input Field auto-fill email and password on Android or iOS

How to make a Flutter Input Field auto-fill email and password on Android or iOS

Posted on by Toma Velev

To make a Input Field in your Flutter app auto-fill the user’s email (or suggest emails saved on the device) on Android or iOS, you can use the autofillHints property of the TextFormField or TextField.

✅ Basic Example

TextFormField(
  autofillHints: [AutofillHints.email],
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(
    labelText: 'Email',
  ),
)

🛠 Additional Steps to Make It Work

1. Wrap the form in AutofillGroup

AutofillGroup(
  child: Column(
    children: [
      TextFormField(
        autofillHints: [AutofillHints.email],
        keyboardType: TextInputType.emailAddress,
        decoration: InputDecoration(labelText: 'Email'),
      ),
      TextFormField(
        autofillHints: [AutofillHints.password],
        obscureText: true,
        decoration: InputDecoration(labelText: 'Password'),
      ),
    ],
  ),
)

2. Ensure your app has a TextInputAction

Add textInputAction: TextInputAction.next (or done) so that autofill submits correctly.

textInputAction: TextInputAction.next,

3. Test it on a real device, not an emulator/simulator — autofill often doesn’t trigger there.

✨ Bonus (iOS-specific)

iOS requires proper configuration in the Info.plist for autofill to work optimally with login credentials, but just for email autofill, AutofillHints.email usually works out of the box.

If you’re building a login form, consider using:

AutofillHints.username

for better integration.

How to make the app save the login info to the OS

🔐 Basic Setup in Flutter

Flutter won’t automatically save login credentials to the OS, but you can make it eligible for that by:

✅ 1. Use AutofillHints Correctly

AutofillGroup(
  child: Column(
    children: [
      TextFormField(
        autofillHints: [AutofillHints.username],
        keyboardType: TextInputType.emailAddress,
        decoration: InputDecoration(labelText: 'Email'),
      ),
      TextFormField(
        autofillHints: [AutofillHints.password],
        obscureText: true,
        decoration: InputDecoration(labelText: 'Password'),
      ),
    ],
  ),
)

✅ 2. Call TextInput.finishAutofillContext()

When the user logs in successfully, notify the system:

TextInput.finishAutofillContext();

That triggers the OS (especially iOS) to offer saving the credentials.

📱 Platform-Specific Details

✅ Android – Smart Lock / Credential Manager (Newer API)

To save credentials on Android:

  1. You need native code using Google’s Credential Manager API (new) or Smart Lock (deprecated).
  2. You can implement it using a Flutter plugin like credential_manager, or write your own Android code with MethodChannel.

✅ iOS – iCloud Keychain

iOS will offer to save credentials only if:

  • AutofillHints.username and AutofillHints.password are set properly.
  • You call TextInput.finishAutofillContext().
  • You test on a real device with iCloud Keychain enabled.

🧪 Example: Trigger Save After Successful Login

void onLoginSuccess() {
  // Call after login is successful to suggest saving to OS
  TextInput.finishAutofillContext();
  // Navigate or show success
}

🔌 Want Deep Integration?

If you want automatic sign-in or auto-suggestions like Google accounts, consider:

  • google_sign_in for federated identity.
  • Native integration of Smart Lock / Credential Manager for email-password.

🔍 Common Autofill Issues in Flutter

❌ Autofill not working at all

Even with:

  • AutofillHints
  • AutofillGroup
  • TextInput.finishAutofillContext()

…nothing happens?

That’s a known issue, especially on:

  • Android 11+ (changes to autofill behavior)
  • iOS (requires real device + proper focus handling)

✅ Known Workarounds That Help

1. Use TextFormField over TextField

TextFormField works more reliably with autofill.

2. Ensure the field gets focus naturally

Autofill won’t work if you force focus programmatically or open a form in a dialog.

3. Set the textInputAction properly

For example:

textInputAction: TextInputAction.done,

It helps signal the end of editing, allowing autofill to trigger.

4. Call TextInput.finishAutofillContext()

Right after successful form submission.

5. Use keyboardType: TextInputType.emailAddress for email

So the OS knows what you’re expecting.

6. Use real device – not emulator

Autofill often won’t show on emulator/simulator.

🔧 Alternative: Native Credential Handling

If autofill is unreliable and you want consistent behavior:

  • On Android, integrate Credential Manager API (newer, better than Smart Lock).
  • On iOS, rely on iCloud Keychain, but that’s limited without native UIKit views.

You can use native platform code via MethodChannel or wait for plugins to stabilize.

🛠 Possible Plugin to Watch

credential_manager – Google’s newer solution for Android (though Flutter support is early).

TL;DR – My Advice?

If you want to support autofill:

  • Stick with TextFormField + AutofillGroup
  • Test on real devices
  • Don’t expect miracles
  • Call TextInput.finishAutofillContext() manually

If you want to reliably save/retrieve credentials, consider native credential management integration or use a secure local solution like flutter_secure_storage.

Setup associeted domains

Setting up Associated Domains is necessary for features like:

  • iOS Keychain credential autofill
  • Universal Links
  • Sign in with Apple
  • Passkeys (in the future)

Let’s go step by step for setting it up for Keychain autofill (and optionally universal links).

🍎 iOS: Associated Domains for Keychain Autofill

🔧 Step 1: Enable Associated Domains in Xcode

  1. Open your project in Xcode (ios/Runner.xcworkspace)
  2. Click on the Runner target > Signing & Capabilities tab. More on iOS app Signing – https://programtom.com/dev/2025/04/12/ios-app-signing-explained/
  3. Click + Capability → choose Associated Domains
  4. Add a domain in this format:
webcredentials:yourdomain.com

For universal links, also add:

applinks:yourdomain.com

✅ Make sure the domain has HTTPS and a valid certificate!

📄 Step 2: Host the apple-app-site-association File

You need to place a special JSON file at:

https://yourdomain.com/.well-known/apple-app-site-association

No file extension (.json) and no redirects allowed!

📄 Example File (for Keychain autofill only)

{
  "webcredentials": {
    "apps": ["<TeamID>.bundle.identifier"]
  }
}

Replace:

  • <TeamID> – your Apple developer team ID
  • bundle.identifier – your app’s bundle ID (e.g. com.example.myapp)

You can find your Team ID here: https://developer.apple.com/account/#/membership

🧪 Step 3: Test Autofill Prompt

Once you’ve logged in using a form with AutofillHints.username/password, and the domain is associated correctly, iOS should offer to save credentials to iCloud Keychain for autofill next time.

🌍 Bonus: Host the AASA File Correctly

✅ Hosting tips:

⚠️ Common Gotchas

  • ❌ Using the wrong MIME type (should be application/json)
  • ❌ Redirecting the .well-known path
  • ❌ Wrong TeamID or bundle ID in AASA file
  • ❌ Invalid HTTPS certificate