text_field_builder

A customizable and flexible Flutter package that helps you build text input fields, including password fields and PIN code inputs, using reusable models and styling components.

Features

• FieldModel to configure various properties of text fields
• PasswordField widget with toggleable visibility and input validation
• PinCodeField widget for entering secure codes (e.g., OTPs)
• AppPhoneField for formatted phone number input with country picker
• AppSearchField for toggleable in-app search with clear button
• InputFocusHandler to easily manage input focus between fields
• MobileNumberInfo for working with international phone numbers
• Configurable InputDecorationStyle for border, padding, radius, etc.

Installation

Add the following to your pubspec.yaml:

dependencies:
  text_field_builder: latest_version

Then run:

flutter pub get

Getting Started

Basic TextField using FieldModel

final fieldModel = FieldModel(
  labelText: 'Username',
  hintText: 'Enter your username',
  errorMsg: 'Username is required',
);

PasswordField

PasswordField(
  controller: _passwordController,
  labelText: 'Password',
  hintText: 'Enter your password',
  validator: (value) => value!.isEmpty ? 'Required' : null,
);

PinCodeField

PinCodeField(
  onChanged: (value) {
    print('PIN: $value');
  },
);

PhoneField with Country Code Picker

AppPhoneField(
  onChanged: (info) => print(info.completeNumber),
);

Search Field

AppSearchField(
  fieldModel: FieldModel(
    hintText: 'Search',
    controller: _searchController,
    onChanged: (value) => print('Searching: $value'),
  ),
);

Utility Classes

InputFocusHandler

Change focus between fields easily:

InputFocusHandler.changeFocusField(context, currentFocus, nextFocus);

MobileNumberInfo

Helper for formatting international numbers:

final info = MobileNumberInfo(
  countryCode: '+1',
  countryISOCode: 'US',
  number: '1234567890',
);
print(info.completeNumber); // +11234567890

Customization

You can customize input decorations, keyboard types, padding, border styles, colors, icons, and much more through FieldModel and widget parameters. The InputDecorationStyle class allows you to:

• Set custom borderRadius, borderColor, and borderWidth
• Define padding and filled background
• Use prefix/suffix icons with callbacks
• Style error messages and hints

License

MIT License. See LICENSE file for details.

---

Made with ❤️ by Shohidul Islam https://github.com/GenieCoderSrc/text_field_builder