custom_main_text_field 1.0.1

A highly customizable Flutter text field with password visibility toggle, prefix/suffix icons, validation, focus states, and extensive styling options.

custom_main_text_field

A highly customizable Flutter text field widget with password visibility toggle, validation, focus states, and 40+ styling options.

Features

✨ Password toggle – show/hide password with one tap
🎯 Form validation – integrates with Flutter Form
🎨 40+ customization options – colors, borders, padding, icons
👁️ Focus states – visual feedback when focused
🔒 Forgot password button – built-in for login forms
📏 Character counter – with customizable display
🚫 Read-only mode – for display-only fields
⌨️ Input formatters – phone, card numbers, etc
🌈 Theme-aware – respects Material theme
⚡ Zero dependencies – Flutter only

---

Installation

dependencies:
  custom_main_text_field: ^1.0.0

---

Quick Start

import 'package:custom_main_text_field/custom_main_text_field.dart';

CustomTextField(
  controller: emailController,
  hint: 'Enter email',
  title: 'Email',
  prefixIcon: Icons.email,
  validator: (v) => v?.isEmpty ?? true ? 'Required' : null,
)

---

Examples

1. Basic text field

CustomTextField(
  controller: nameController,
  hint: 'Enter your name',
  title: 'Full Name',
)

2. Password field

CustomTextField(
  controller: passwordController,
  hint: 'Enter password',
  title: 'Password',
  isPassword: true,
  prefixIcon: Icons.lock,
)

3. Password with "Forgot password?"

CustomTextField(
  controller: passwordController,
  hint: 'Enter password',
  title: 'Password',
  isPassword: true,
  prefixIcon: Icons.lock,
  showForgotPassword: true,
  onForgotPasswordTap: () => Navigator.push(...),
)

4. With prefix icon

CustomTextField(
  controller: emailController,
  hint: '[e-mail]',
  title: 'Email',
  prefixIcon: Icons.email,
  keyboardType: TextInputType.emailAddress,
)

5. With suffix icon

CustomTextField(
  controller: searchController,
  hint: 'Search...',
  suffixIcon: Icons.search,
  onSuffixIconTap: () => performSearch(),
)

6. Custom colors

CustomTextField(
  controller: controller,
  hint: 'Enter text',
  fillColor: Colors.blue.shade50,
  borderColor: Colors.blue.shade200,
  focusedBorderColor: Colors.blue,
  prefixIconColor: Colors.blue,
)

7. Multi-line textarea

CustomTextField(
  controller: notesController,
  hint: 'Enter notes',
  title: 'Notes',
  maxLines: 5,
  minLines: 3,
)

8. Phone number with formatter

CustomTextField(
  controller: phoneController,
  hint: '[phone]',
  title: 'Phone',
  prefixIcon: Icons.phone,
  keyboardType: TextInputType.phone,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    LengthLimitingTextInputFormatter(10),
  ],
)

9. With validation

CustomTextField(
  controller: emailController,
  hint: '[e-mail]',
  title: 'Email',
  isRequired: true,
  prefixIcon: Icons.email,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    if (!value.contains('@')) {
      return 'Enter valid email';
    }
    return null;
  },
  autovalidateMode: AutovalidateMode.onUserInteraction,
)

10. Read-only field

CustomTextField(
  controller: TextEditingController(text: 'Read only value'),
  title: 'User ID',
  readOnly: true,
  fillColor: Colors.grey.shade100,
)

---

API Reference

Core Properties

Parameter	Type	Default	Description
controller	TextEditingController	required	Text controller
validator	String? Function(String?)?	null	Validation function
keyboardType	TextInputType	text	Keyboard type
onChanged	ValueChanged<String>?	null	Text change callback
onTap	VoidCallback?	null	Tap callback

Icons

Parameter	Type	Default	Description
isPassword	bool	false	Show password toggle
prefixIcon	IconData?	null	Leading icon
suffixIcon	IconData?	null	Trailing icon
prefixIconColor	Color?	null	Prefix icon color
suffixIconColor	Color?	null	Suffix icon color
onSuffixIconTap	VoidCallback?	null	Suffix tap handler
iconSize	double	20	Icon size

Text & Labels

Parameter	Type	Default	Description
title	String?	null	Label above field
hint	String	''	Placeholder text
labelText	String?	null	Floating label
showFloatingLabel	bool	false	Enable floating label
isRequired	bool	false	Show asterisk
titleStyle	TextStyle?	null	Title text style
hintStyle	TextStyle?	null	Hint text style

Styling

Parameter	Type	Default	Description
fillColor	Color?	White	Background color
borderColor	Color?	Divider	Normal border color
focusedBorderColor	Color?	Primary	Focused border color
errorBorderColor	Color?	Error	Error border color
borderRadius	double	12	Corner radius
borderWidth	double	1.5	Normal border width
focusedBorderWidth	double	2.0	Focused border width
padding	EdgeInsetsGeometry?	bottom 20	Outer padding
contentPadding	EdgeInsetsGeometry?	16 all	Inner padding

Behavior

Parameter	Type	Default	Description
enabled	bool	true	Enable/disable
readOnly	bool	false	Read-only mode
maxLines	int?	1	Max lines
maxLength	int?	null	Max characters
showCounter	bool	true	Show character count
autovalidateMode	AutovalidateMode?	null	Validation mode
inputFormatters	List<TextInputFormatter>?	null	Input formatters
unfocusOnTapOutside	bool	true	Unfocus on outside tap

Special Features

Parameter	Type	Default	Description
showForgotPassword	bool	false	Show forgot password button
onForgotPasswordTap	VoidCallback?	null	Forgot password handler
forgotPasswordText	String	'Forgot password?'	Button text

---

Use Cases

✅ Login forms
✅ Registration forms
✅ Profile edit screens
✅ Search bars
✅ Comment/note fields
✅ Settings forms
✅ Any text input!

---

Contributing

Pull requests are welcome! For major changes, please open an issue first.

License

MIT — see LICENSE.