CustomFormField - Custom Widgets Series

Welcome to another article for my Custom Widgets Series. In this series I share some tips and code about creating reusable and advanced flutter widgets. These widgets are used by me and many professionals out there in production level flutter apps. Now they are available to you!

Table of Contents

1. Introduction
2. Usage
3. Code
4. Credits

Introduction

Are you tired of dealing with the complexities of form fields in Flutter? Do you wish there was a simpler way to handle form validation, error styling, and value changes without writing tons of boilerplate code or messing with the Form API? I designed my own custom widget to make form handling in Flutter a breeze.

I recently shared some screenshots of forms from my Famony app on X(twitter).

These forms contained validations for different field types like dropdowns, textfields, date picker, gender cards etc. You can see in the image below:

Many people inboxed me asking how I was able to do that since not every widget has validations and it gets very messy to sync them all.

CustomFormField ✨

Introducing the CustomFormField widget, wrapper around FormField widget that takes in validation, onSaved, onChanged callbacks etc.

With CustomFormField, you can easily manage form validation, error display, and value changes with minimal effort. No more struggling with the default FormField API to achieve basic functionality. It provides a clean and intuitive way to handle form fields, allowing you to focus on building great user experiences.

It has built-in support for validation errors which you can style as you want. Just wrap any child to add validation without worrying about form reactive logic. You can see the it in the example below.

CustomValueListener

The CustomFormField needs a way to keep the form in sync and allow updating it from anywhere using a controller. Since the field can be of dynamic nature, the most suitable option for a controller was a ValueNotifier<T>, where <T> is the type you pass to your CustomFormField<T>. In order to listen to this custom controller we needed a custom listener widget as well.

The CustomValueListener widget is essential for efficiently managing state changes in the CustomFormField. It listens to a ValueNotifier and triggers updates whenever the value changes, ensuring that the form field's state is kept in sync. This separation of concerns simplifies the code, making it cleaner and more maintainable. Additionally, it handles the lifecycle of the listener, adding it during initialization and removing it upon disposal, which prevents memory leaks and ensures optimal performance. This approach allows for a more responsive and dynamic form handling experience in Flutter.

Code

Here is the crux of it all, the code for this amazing widget. I decided to place it at the end to avoid confusion, because it was important to see the usage and benefits before the implementation. I have included it as gist so I can update it in the future, if needed.

Credits

If you like it, please keep following me as I have around 40 such widgets and I will post many more of these.