text_field_custom 1.0.0 copy "text_field_custom: ^1.0.0" to clipboard
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 /example for 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

4
likes
160
points
107
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

In this package I have customized the textformfield for easy use.

Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

flutter, validation_helper

More

Packages that depend on text_field_custom