Flutter: Upgrade your TextFields with autofill in 2 steps.

Flutter 1.20.1 was announced recently and a long awaited feature auto-fill for text input fields is now available. Let's find out how to add this to your app in 2 steps.

Most of us who needed this feature were depending on pub packages previously, but not anymore. We are going to add autofill capability to an existing TextFormField for filling OTP. Enough intro lets jump into step 1.

Step 1

Add parameter autofillHints to your existing TextField or TextFormField. This takes a list of Auto-fill Hints values.

TextFormField sample for an OTP field.

Step 2

Add the Auto-fill hint using constants form AutofillHints class as a list.
even if you only have one Hint, you have to add it as a single item in a list.

TextFormField after Auto-fill hint added.

For a complete list of supported auto-fill hints in flutter refer to this documentation.

That’s it. It was simple work, right? 😎

Special Cases

Some fields like email fields you have to set the keyboardType parameter as TextInputType.email to before you set autofillHints: AutofillHints.email.

For Autofilling password and email in IOS, you again need to follow some additional configurations. Check this documentation for more info.