Custom Form Field in Flutter

Flutter has been my favorite way to create a mobile app from the day one I started using it. Due to the high level of UI customizations and ease of building complex UI, Flutter has been a favorite for many developers. Some of the apps I worked has lots of fields in the form. Most of the common fields are given by the framework itself. But there are some instances where it’s not enough and you have to build custom form fields.

A very simple example will be to show the checkmark or cross according to the user input along with the validation message. For this, we are using FormField class from Flutter. If you look at the source code of the default form field widgets available in the Flutter like TextFormField, DropdownButtonFormField, all of them extend this class. So, to create our custom form field we will be using this class as well. In this example, I will show you a simple example to create a custom TextFormField.

In the above example, we are using the FormField widget. In FormField, the builder method is where we build the custom field UI we want to build. We have used TextFormField for the user input like we used to do. But in line 19, we are using conditional rendering to show check if the form field state is valid i.e isValid is true. In line 20, we are showing a cross icon if there is an error. Also in line 27, we are showing an error message from the validator if it has an error.

In the above video, you can see the red cross icon is shown along with the error message when an error occurs and a checkmark icon is shown when it is valid.

Let’s take the implementation a little further. Sometimes creating a widget within the same file can be a little messy. In such a case, we can create a separate class that extends FromField.

For this example, let’s take a scenario when you want to build a dropdown form field but instead of opening an overlay above the field we want to show a separate screen to show options and when the user selects the option then go back to the form screen and show the selected option.

In the above code, We have extended the FormField class with a generic type T, the T determines the type of object we are using to form the list of items. In the super part of the constructor, we are passing a builder parameter. The builder parameter here works exactly like in the previous example. In the builder method, we are creating our form field UI with similar logic for showing an error message. For simplicity, and making the class similar to DropdownButtonFormField, We can use DropdownMenuItem but we can use other custom classes to build the option items. The main part to notice here is in line 22 inside the onTap function of the InkWell. In onTap, We can show a new screen and pass the items to that screen. Then we can wait for the result from the screen and set it as a new value in our custom form field class using didChange function for FormFieldState.

This is the new screen, which shows the options to be selected. When clicking the option, it returns the item value.

Now you can use our CustomDropDownFormField like DropDownFormField.

If you want more customization then you can pass it to the CustomDropDownFormField and then pass them to the super constructor as required.

This is a very basic example of creating a custom form field. I will create more blogs around this topic to address more type of custom form field.