Autofill Hints Suggestion List in Flutter

You must have noticed that the majority of websites and mobile applications provide an autofill list. These features can now be added to your Flutter app without importing any packages. Just read the article for this amazing property in the text form field/text field.

Example:

We need to display several suggestion lists depending on the sort of data that the user will enter. For example, we have a text field for email, where the user typically enters the email address that they use to log in to their phone. We can accomplish this using just one AutofillHints is a list of strings that help the autofill service identify the type of this text input.

Syntax:

// Add textfield and textformfield in your scaffold 
TextFormField(
    autofillHints: [
        //suggestion list to be shown from this field
    ],
)

Example:

Dart

// Example 1 Suggestion for emails logged in or used from your device
TextFormField(
        autofillHints: const [
            AutofillHints.email,
        ],
        keyboardType: TextInputType.emailAddress),

    // Example 2  Suggestion for names used in your device
    TextFormField(
        decoration: const InputDecoration(
                labelText: "Name",
                hintText: "Name",
            ),
            autofillHints: const [
                AutofillHints.name,
            ],
    ),

    // Example 3  Suggestion list with different types of text used in your device
    TextFormField(
        keyboardType: TextInputType.text,
        decoration: const InputDecoration(
                border: OutlineInputBorder(),
                enabledBorder: OutlineInputBorder(),
                focusedBorder: OutlineInputBorder()),
            autofillHints: const [
                AutofillHints.name,
                AutofillHints.email,
                AutofillHints.addressCityAndState,
            ],
    )

// Example 4  Custom Suggestion list
TextFormField(
    keyboardType: TextInputType.text,

    autofillHints: const [
        "flutter_wings",
        "geeksforgeeks"
    ],
)

Output:

Important Note: For better result pass keyboardtype also in your textfield,textformfield.

TextFormField(keyboardType: TextInputType.emailAddress,
    autofillHints: const [AutofillHints.email,
        // email logged in that device to be shown from this field
    ],
)