text_field_custom 1.0.0
text_field_custom: ^1.0.0 copied to clipboard
In this package I have customized the textformfield for easy use.
๐ฆ text_field_custom #
A highly customizable, reusable, and production-ready Flutter text field widget with built-in support for titles, validation, theming, borders, icons, formatting, and more.
Designed to reduce boilerplate, ensure UI consistency, and accelerate form development across Flutter apps.
โจ Features #
- โ Optional title with required indicator (*)
- โ Built-in validation support
- โ Prefix & suffix widget support
- โ Read-only, disabled & view-only modes
- โ Filled, outlined & custom border styles
- โ Input formatters, maxLength, multiline support
- โ Keyboard actions & focus control
- โ ๐ Dark & Light theme support (ThemeExtension)
- โ ๐จ Global styling via ThemeData
- โ โก Clean, scalable & production-ready API
๐ธ Preview #
Add screenshots or GIFs from
/examplefor better engagement.
๐ Installation #
Add this to your pubspec.yaml:
dependencies:
text_field_custom: ^2.0.0
Then run:
flutter pub get
๐ฆ Import #
import 'package:text_field_custom/text_field_custom.dart';
import 'package:text_field_custom/text_field_custom_theme.dart';
๐ง Theming (NEW ๐) #
You can now configure global styles using ThemeExtension.
๐ฅ Setup in main.dart #
MaterialApp(
theme: ThemeData(
extensions: [
TextFieldCustomTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
fillColor: Color(0xFFF5F5F5),
filled: true,
textStyle: TextStyle(fontSize: 14),
hintStyle: TextStyle(color: Colors.grey),
titleStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
],
),
);
๐ Dark Theme Support #
darkTheme: ThemeData(
brightness: Brightness.dark,
extensions: [
TextFieldCustomTheme(
fillColor: Colors.grey.shade900,
textStyle: TextStyle(color: Colors.white),
hintStyle: TextStyle(color: Colors.grey),
),
],
),
๐ฏ Styling Priority #
Widget parameter > ThemeExtension > Default values
This gives you full flexibility + global consistency.
๐งฑ Basic Usage #
TextFieldCustom(
title: "Email",
hintText: "Enter your email",
isRequired: true,
validator: (v) {
if (v == null || v.isEmpty) return "Email is required";
if (!v.contains("@")) return "Invalid email";
return null;
},
)
๐งฉ Usage Examples #
1๏ธโฃ Simple Field #
TextFieldCustom(
title: "Name",
hintText: "Enter your name",
)
2๏ธโฃ Password Field #
TextFieldCustom(
title: "Password",
hintText: "Enter password",
obscureText: true,
)
3๏ธโฃ Phone Field with Formatter #
TextFieldCustom(
title: "Phone",
keyboardType: TextInputType.phone,
maxLength: 10,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)
4๏ธโฃ Read-only Picker Field #
TextFieldCustom(
title: "Date of Birth",
hintText: "Select date",
readOnly: true,
onTap: () {
// Open date picker
},
)
5๏ธโฃ With Prefix & Suffix #
TextFieldCustom(
title: "Search",
hintText: "Search",
prefix: Icon(Icons.search),
suffix: Icon(Icons.mic),
)
6๏ธโฃ Multiline Text Field #
TextFieldCustom(
title: "Description",
maxLines: 4,
)
7๏ธโฃ Filled Style Field #
TextFieldCustom(
title: "Username",
filled: true,
fillColor: Colors.grey.shade100,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
)
8๏ธโฃ Disabled / View-only Field #
TextFieldCustom(
title: "User ID",
initialValue: "USR_12345",
onlyText: true,
)
9๏ธโฃ Override Global Theme Locally #
TextFieldCustom(
title: "Custom Field",
filled: false,
border: UnderlineInputBorder(),
)
๐งช Example App #
A complete working example is available in:
/example
Run it:
cd example
flutter run
๐งฉ Available Parameters #
| Parameter | Description |
|---|---|
title |
Label shown above field |
hintText |
Placeholder text |
controller |
TextEditingController |
validator |
Validation function |
obscureText |
Password mode |
readOnly |
Makes field readonly |
enabled |
Enables / disables field |
onlyText |
View-only mode |
prefix |
Prefix widget |
suffix |
Suffix widget |
filled |
Filled background |
fillColor |
Background color |
border |
Custom border |
keyboardType |
Keyboard type |
textInputAction |
Keyboard action |
maxLines |
Multiline support |
maxLength |
Character limit |
inputFormatters |
Input formatters |
onChanged |
Change callback |
onSubmitted |
Submit callback |
๐๏ธ Why use this package? #
- ๐ Reduces repetitive UI code
- ๐ฏ Standardizes form UI across apps
- ๐จ Centralized theming support
- ๐งผ Clean and scalable architecture
- ๐ฆ Easy to maintain and extend
๐ฃ๏ธ Roadmap #
- โ Field variants (outlined / filled / borderless)
- โ Size system (small / medium / large)
- โ Built-in password toggle
- โ SearchField / DateField variants
- โ Form builder helpers
๐ค Contributing #
Contributions, issues, and feature requests are welcome!
๐งโ๐ป Author #
Amarjeet Srivastava Senior Flutter Developer
๐ License #
MIT License