Custom Form Fields
Create reusable custom form fields tailored to specific application needs, enhancing modularity and user experience.
Custom Form Fields is a free Flutter Mobile Development lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Custom Form Fields?
When building apps, you often need similar input fields across different screens. Think about email inputs, password fields, or phone numbers.
Copying and pasting the same TextFormField code everywhere can lead to messy, hard-to-maintain code. This is where custom form fields come in!
What is a Custom Field?
A custom form field is essentially a Flutter Widget that wraps other input widgets, like TextFormField, and adds specific styling, validation, or behavior.
- Reusability: Define it once, use it everywhere.
- Consistency: Ensures all similar inputs look and behave the same.
- Clean Code: Reduces boilerplate and improves readability.
Basic Custom Field Structure
Let's start with a simple custom text input field. We'll create a StatelessWidget that wraps a TextFormField. This allows us to define its basic look and feel.
import 'package:flutter/material.dart';
class CustomTextInput extends StatelessWidget {
final String hintText;
const CustomTextInput({Key? key, required this.hintText}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
hintText: hintText,
border: OutlineInputBorder(),
),
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Custom Field Demo')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CustomTextInput(hintText: 'Enter your name'),
),
),
),
));
}Adding Controllers & Validation
For our custom field to be truly useful, it needs to accept a TextEditingController to manage its value and a FormFieldValidator for validation. We pass these as parameters to our custom widget.
import 'package:flutter/material.dart';
class CustomValidatedInput extends StatelessWidget {
final String hintText;
final TextEditingController controller;
final String? Function(String?)? validator;
const CustomValidatedInput({
Key? key,
required this.hintText,
required this.controller,
this.validator,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
controller: controller,
decoration: InputDecoration(
hintText: hintText,
border: OutlineInputBorder(),
),
validator: validator,
);
}
}
void main() {
final TextEditingController _nameController = TextEditingController();
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Validated Field Demo')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
child: CustomValidatedInput(
hintText: 'Enter your name (min 3 chars)',
controller: _nameController,
validator: (value) {
if (value == null || value.length < 3) {
return 'Name must be at least 3 characters.';
}
return null;
},
),
),
),
),
),
));
}A Reusable Email Field
Let's create a specific custom field for email input. It will have a predefined keyboard type and a common email validation pattern. This makes it easy to use consistently.
import 'package:flutter/material.dart';
class CustomEmailField extends StatelessWidget {
final TextEditingController controller;
final String labelText;
const CustomEmailField({
Key? key,
required this.controller,
this.labelText = 'Email',
}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
controller: controller,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: labelText,
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email.';
}
if (!RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(value)) {
return 'Please enter a valid email.';
}
return null;
},
);
}
}
void main() {
final TextEditingController _emailController = TextEditingController();
final _formKey = GlobalKey<FormState>();
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Custom Email Field Demo')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
CustomEmailField(controller: _emailController),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('Email: ${_emailController.text}');
}
},
child: Text('Submit'),
),
],
),
),
),
),
),
));
}Generic Custom Text Input
What if you need a custom field that's flexible enough for various text inputs (names, addresses, etc.) but still offers custom styling? You can pass more properties to make it generic.
import 'package:flutter/material.dart';
class GenericCustomTextField extends StatelessWidget {
final TextEditingController controller;
final String labelText;
final TextInputType keyboardType;
final bool obscureText;
final String? Function(String?)? validator;
const GenericCustomTextField({
Key? key,
required this.controller,
required this.labelText,
this.keyboardType = TextInputType.text,
this.obscureText = false,
this.validator,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
controller: controller,
keyboardType: keyboardType,
obscureText: obscureText,
decoration: InputDecoration(
labelText: labelText,
border: OutlineInputBorder(),
),
validator: validator,
);
}
}
void main() {
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
final _formKey = GlobalKey<FormState>();
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Generic Field Demo')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
GenericCustomTextField(
controller: _usernameController,
labelText: 'Username',
validator: (value) => value!.isEmpty ? 'Enter username' : null,
),
SizedBox(height: 20),
GenericCustomTextField(
controller: _passwordController,
labelText: 'Password',
obscureText: true,
validator: (value) => value!.length < 6 ? 'Min 6 chars' : null,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('Username: ${_usernameController.text}');
print('Password: ${_passwordController.text}');
}
},
child: Text('Login'),
),
],
),
),
),
),
),
));
}Adding Interactive Elements
Custom fields can also include interactive elements like suffix icons that change state. A common example is a password field with a toggle to show/hide text.
For this, our custom field needs to be StatefulWidget to manage the visibility state.
Custom Password Field with Toggle
Here's how to build a custom password field that allows users to toggle password visibility. Notice the use of StatefulWidget to manage the internal _obscureText state.
import 'package:flutter/material.dart';
class CustomPasswordField extends StatefulWidget {
final TextEditingController controller;
final String labelText;
const CustomPasswordField({
Key? key,
required this.controller,
this.labelText = 'Password',
}) : super(key: key);
@override
_CustomPasswordFieldState createState() => _CustomPasswordFieldState();
}
class _CustomPasswordFieldState extends State<CustomPasswordField> {
bool _obscureText = true;
@override
Widget build(BuildContext context) {
return TextFormField(
controller: widget.controller,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: widget.labelText,
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
suffixIcon: IconButton(
icon: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off,
),
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
),
),
validator: (value) {
if (value == null || value.length < 6) {
return 'Password must be at least 6 characters.';
}
return null;
},
);
}
}
void main() {
final TextEditingController _passwordController = TextEditingController();
final _formKey = GlobalKey<FormState>();
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Password Field Demo')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
CustomPasswordField(controller: _passwordController),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('Password: ${_passwordController.text}');
}
},
child: Text('Submit'),
),
],
),
),
),
),
),
));
}Benefits of Custom Fields
Using custom form fields significantly improves your application's development and maintenance:
- Code DRYness: Don't Repeat Yourself, leading to less code.
- Easier Updates: Change one custom field, and all instances update automatically.
- Better UX: Ensures a consistent and intuitive user experience across your app.
- Simplified Logic: Encapsulates complex validation or UI logic within the field itself.
Quick Check: Custom Fields
Which of the following are primary benefits of creating custom form fields in Flutter?
Recap: Custom Form Fields
You've learned how to create custom form fields in Flutter! By wrapping existing input widgets in your own StatelessWidget or StatefulWidget, you can build reusable, consistent, and maintainable input components.
This approach helps keep your code clean, centralizes design and validation, and drastically improves the user experience by providing a unified interface across your application.
Frequently asked questions
Is the “Custom Form Fields” lesson free?
Yes — the full text of “Custom Form Fields” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.
What will I learn in “Custom Form Fields”?
Create reusable custom form fields tailored to specific application needs, enhancing modularity and user experience. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Flutter Mobile Development?
No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Custom Form Fields” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Flutter Mobile Development lesson?
Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.