How to implement autofill in your Flutter app

Your app is missing this one key feature that will guarantee improved user satisfaction

The developers at Flutter recently released version 1.20.0. This update features performance improvements, new widgets, added features, and more. For more specific information about the update, check out the official release notes here, here, and here.

We’ll be talking about one newly added feature in this article: autofill. There’s a reason why autofill has been the most requested feature — forms are slow, annoying, and error-prone. Taking advantage of the autofill capabilities introduced in Flutter 1.20.0 will greatly improve user experience when using your app. This article will provide a comprehensive guide to implementing this feature along with detailed examples and sample code.

Creating a Form

To begin adding this feature into your app, start by creating a simple form that asks for the user’s name, email address, and phone number (standard data that should be available on a user’s mobile device). Although the form we’ll be creating will be limited to these fields, the scope of autofill’s capabilities is much wider. Here’s a list of everything it supports:

These are all of the autofill fields that Flutter supports.

Here’s the code for the basic form that we’ll be using:

Example form

This is a standard form that asks for multiple basic data entries. To understand the form, let’s explore one TextFormField in detail:

The hintText field controls what the user sees when they open the form. This information guides them to enter the right information in each field.

The keyboardType is used to limit input into each field. For example, this can be used to prevent users from entering letters in a phone number field and saves you from having to account for unexpected submissions.

The autofillHints is used to control what autofill suggestion the user sees when they’re filling out the form. This is important; the user shouldn’t be prompted to enter their email when you are asking for their phone number.

The validator function is used to handle and process the user’s input. In this example, we’re using a comprehensive regex pattern to identify email addresses. If the user enters text that does not follow the email format, the form will return the error message that is specified (‘Enter a valid email’ in this case).

The code above is completely valid. However, if you start your emulator, launch the app, and begin filling out the form, you will not see any autofill suggestions. To see them while in the development phase, you will have to download an autofill service and optimize your app for autofill.

Installing the AutoFill Service

Note: This step is only for testing on an emulator. If you have a physical device, you should be able to see autofill in action without having to follow these steps.

Download the service by using this link or by cloning the repository from GitHub:

$ git clone https://github.com/android/input-samples.git

Extract the downloaded zip file, navigate to AutofillFramework,and place it into C:\Users\name or the root folder. The extracted folder, AutofillFramework, contains the optimized autofill service.

Now, follow these steps:

1. Open Android Studio and click Import project (Gradle, Eclipse ADT, etc.)
2. In the Select Eclipse or Gradle Project to Import dialog, choose the folder where you downloaded the autofill service sample. Click OK.
3. Select afservice from the Run/Debug configuration dropdown and click the Run button.
4. Select your device from the Select Deployment Target dialog.

When you run afservice, you should automatically see the following screen. If this screen isn’t visible, open Settings and search for autofill service.

Once you’re on the screen above, follow these instructions:

1. Scroll to the bottom and under the Enable/Disable section, toggle the “Set default Autofill service” to turn autofill on.
2. On the following screen, choose “Debug Autofill Service”.
3. Click OK in the Make sure you trust this app dialog.
4. On the original screen, tap “Add fake Autofill data”. Select the number of datasets that you would like to use for testing.

That’s it! Close the afservice folder and return to your project, launch the emulator and you should see autofill suggestions on your app. The number of visible suggestions is based on the number of fake datasets you added in the fourth step.

All the code used in this article (and other articles) can be found in my GitHub repo.

If you found this article helpful, consider following me for more Flutter articles and leave any feedback or comments below!