smart_advanced_text_field

A professional, reusable Flutter TextField package with built-in validation, formatters, theming, OTP field, and multiple styles — designed as a small UI framework you can drop into any project.

Features

✅ 18 professional input widgets
✅ 7 built-in field styles
✅ 13 input types with auto keyboard and formatters
✅ Built-in validators (email, password, phone, username, url)
✅ Built-in input formatters (phone, currency, credit card)
✅ Global theme support via SmartTextFieldThemeProvider
✅ Light and dark theme presets
✅ Named constructors for common fields
✅ GitHub Actions CI on every push
✅ 42 unit tests

Installation

Add to your pubspec.yaml:

dependencies:
  smart_advanced_text_field: ^2.4.2

Then import:

import 'package:smart_advanced_text_field/smart_advanced_text_field.dart';

Setup — Global Theme

Wrap your MaterialApp with SmartTextFieldThemeProvider:

SmartTextFieldThemeProvider(
  theme: SmartTextFieldTheme.light(), // or .dark()
  child: MaterialApp(
    home: MyHomePage(),
  ),
)

Field Styles

// Outlined (default)
SmartTextField(style: FieldStyle.outlined, hintText: 'Outlined')

// Filled
SmartTextField(style: FieldStyle.filled, hintText: 'Filled')

// Underlined
SmartTextField(style: FieldStyle.underlined, hintText: 'Underlined')

// Rounded
SmartTextField(style: FieldStyle.rounded, hintText: 'Rounded')

// Search
SmartTextField(style: FieldStyle.search, hintText: 'Search...')

// Modern
SmartTextField(style: FieldStyle.modern, hintText: 'Modern')

// Flat
SmartTextField(style: FieldStyle.flat, hintText: 'Flat')

Input Types

SmartTextField(inputType: AppInputType.email)
SmartTextField(inputType: AppInputType.password)
SmartTextField(inputType: AppInputType.phone)
SmartTextField(inputType: AppInputType.number)
SmartTextField(inputType: AppInputType.decimal)
SmartTextField(inputType: AppInputType.currency)
SmartTextField(inputType: AppInputType.url)
SmartTextField(inputType: AppInputType.multiline)
SmartTextField(inputType: AppInputType.search)
SmartTextField(inputType: AppInputType.name)
SmartTextField(inputType: AppInputType.username)
SmartTextField(inputType: AppInputType.otp)

Named Constructors

SmartTextField.email(controller: emailController)
SmartTextField.password(controller: passwordController)
SmartTextField.search(controller: searchController)
SmartTextField.phone(controller: phoneController)

Form Validation

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      SmartTextFormField.email(
        validator: SmartValidators.email,
      ),
      SmartTextFormField.password(
        validator: SmartValidators.password,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // form is valid
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

Built-in Validators

SmartValidators.required()
SmartValidators.email
SmartValidators.password
SmartValidators.phone
SmartValidators.username
SmartValidators.name
SmartValidators.url
SmartValidators.number
SmartValidators.minLength(8)
SmartValidators.maxLength(20)
SmartValidators.confirmPassword(passwordController.text)

// Combine multiple validators
SmartValidators.compose([
  SmartValidators.required(),
  SmartValidators.minLength(3),
])

Built-in Formatters

SmartFormatters.digitsOnly
SmartFormatters.lettersOnly
SmartFormatters.lettersAndSpaces
SmartFormatters.alphanumeric
SmartFormatters.username
SmartFormatters.decimal
SmartFormatters.phone
SmartFormatters.currency
SmartFormatters.uppercase
SmartFormatters.lowercase
SmartFormatters.email
SmartFormatters.noSpaces
SmartFormatters.creditCard
SmartFormatters.maxLength(10)

Custom Theme

SmartTextFieldThemeProvider(
  theme: SmartTextFieldTheme(
    borderRadius: 16.0,
    borderColor: Colors.grey.shade300,
    focusedBorderColor: Colors.purple,
    errorBorderColor: Colors.red,
    filledColor: Colors.grey.shade100,
    textColor: Colors.black87,
    hintColor: Colors.grey,
    fontSize: 14.0,
  ),
  child: MaterialApp(...)
)

Widgets

1. SmartTextField

SmartTextField(
  inputType: AppInputType.email,
  style: FieldStyle.outlined,
  labelText: 'Email',
  hintText: 'Enter email',
  prefixIcon: Icons.email_outlined,
  validator: SmartValidators.email,
  onChanged: (value) {},
)

// Named constructors
SmartTextField.email()
SmartTextField.password()
SmartTextField.search()
SmartTextField.phone()

2. SmartTextFormField

Form(
  key: _formKey,
  child: Column(
    children: [
      SmartTextFormField.email(
        validator: SmartValidators.email,
      ),
      SmartTextFormField.password(
        validator: SmartValidators.password,
      ),
    ],
  ),
)

3. SmartOtpField

// 6-digit OTP
SmartOtpField(
  length: 6,
  onCompleted: (otp) => print('OTP: $otp'),
)

// 4-digit PIN (obscured)
SmartOtpField(
  length: 4,
  obscureText: true,
  boxWidth: 56,
  boxHeight: 64,
)

4. SmartDateField

SmartDateField(
  labelText: 'Date of Birth',
  dateFormat: 'dd/MM/yyyy',
  firstDate: DateTime(1900),
  lastDate: DateTime.now(),
  onChanged: (date) => print(date),
)

5. SmartDropdownField

SmartDropdownField(
  labelText: 'Country',
  searchable: true,
  items: [
    SmartDropdownItem(value: 'pk', label: 'Pakistan', icon: Icons.flag),
    SmartDropdownItem(value: 'us', label: 'United States', icon: Icons.flag),
  ],
  onChanged: (value) => print(value),
)

6. SmartRichTextField

SmartRichTextField(
  labelText: 'Description',
  hintText: 'Write something...',
  minLines: 4,
  maxLines: 10,
  showCounter: true,
  onChanged: (value) => print(value),
)

7. SmartRatingField

SmartRatingField(
  labelText: 'Rate your experience',
  maxRating: 5,
  allowHalfRating: true,
  starSize: 36,
  onChanged: (rating) => print(rating),
)

8. SmartTagsField

SmartTagsField(
  labelText: 'Skills',
  hintText: 'Type and press Enter...',
  maxTags: 10,
  initialTags: ['Flutter', 'Dart'],
  onChanged: (tags) => print(tags),
)

9. SmartColorPickerField

SmartColorPickerField(
  labelText: 'Brand Color',
  initialColor: Colors.blue,
  onChanged: (color) => print(color),
)

10. SmartPhoneField

SmartPhoneField(
  labelText: 'Phone Number',
  initialCountry: CountryCode(
    name: 'Pakistan',
    code: 'PK',
    dialCode: '+92',
    flag: '🇵🇰',
  ),
  onChanged: (phone) => print(phone),
  onCountryChanged: (country) => print(country.name),
)

11. SmartSignatureField

final _signatureKey = GlobalKey();

SmartSignatureField(
  labelText: 'Signature',
  height: 200,
  penColor: Colors.black,
  strokeWidth: 3.0,
  onChanged: (hasSignature) => print(hasSignature),
)

// Clear signature
_signatureKey.currentState?.clear();

12. SmartImagePickerField

SmartImagePickerField(
  labelText: 'Profile Photo',
  imageSource: SmartImageSource.both,
  height: 200,
  onChanged: (path) => print(path),
)

13. SmartSliderField

// Single slider
SmartSliderField(
  labelText: 'Volume',
  min: 0,
  max: 100,
  initialValue: 50,
  valueSuffix: '%',
  onChanged: (value) => print(value),
)

// Range slider
SmartSliderField(
  labelText: 'Price Range',
  isRange: true,
  min: 0,
  max: 1000,
  valuePrefix: '\$',
  initialRangeStart: 100,
  initialRangeEnd: 500,
  onRangeChanged: (range) => print(range),
)

14. SmartSwitchField

SmartSwitchField(
  labelText: 'Dark Mode',
  description: 'Enable dark theme',
  icon: Icons.dark_mode_outlined,
  initialValue: false,
  showDivider: true,
  onChanged: (value) => print(value),
)

15. SmartCheckboxField

SmartCheckboxField(
  labelText: 'Select Skills',
  showSelectAll: true,
  maxSelections: 3,
  items: [
    SmartCheckboxItem(
      label: 'Flutter',
      value: 'flutter',
      icon: Icons.phone_android,
      initiallyChecked: true,
    ),
    SmartCheckboxItem(
      label: 'Dart',
      value: 'dart',
      icon: Icons.code,
    ),
    SmartCheckboxItem(
      label: 'Firebase',
      value: 'firebase',
      icon: Icons.cloud_outlined,
    ),
  ],
  onChanged: (selected) => print(selected),
)

16. SmartRadioField

SmartRadioField(
  labelText: 'Gender',
  initialValue: 'male',
  items: [
    SmartRadioItem(
      label: 'Male',
      value: 'male',
      icon: Icons.male,
    ),
    SmartRadioItem(
      label: 'Female',
      value: 'female',
      icon: Icons.female,
    ),
    SmartRadioItem(
      label: 'Other',
      value: 'other',
      icon: Icons.person_outline,
    ),
  ],
  onChanged: (value) => print(value),
)

17. SmartStepperField

// Simple stepper
SmartStepperField(
  labelText: 'Quantity',
  min: 1,
  max: 10,
  initialValue: 1,
  step: 1,
  onChanged: (value) => print(value),
)

// Decimal stepper
SmartStepperField(
  labelText: 'Weight (kg)',
  min: 0,
  max: 200,
  initialValue: 70,
  step: 0.5,
  decimalPlaces: 1,
  valueSuffix: ' kg',
  onChanged: (value) => print(value),
)

18. SmartPinField

final _pinKey = GlobalKey();

// Obscured PIN
SmartPinField(
  key: _pinKey,
  length: 4,
  obscureText: true,
  hapticFeedback: true,
  onCompleted: (pin) => print('PIN: $pin'),
)

// Visible digits
SmartPinField(
  length: 6,
  obscureText: false,
  boxSize: 48,
  onCompleted: (pin) => print('PIN: $pin'),
)

// Clear PIN
_pinKey.currentState?.clear();

Field Styles

SmartTextField(style: FieldStyle.outlined)
SmartTextField(style: FieldStyle.filled)
SmartTextField(style: FieldStyle.underlined)
SmartTextField(style: FieldStyle.rounded)
SmartTextField(style: FieldStyle.search)
SmartTextField(style: FieldStyle.modern)
SmartTextField(style: FieldStyle.flat)

Built-in Validators

SmartValidators.required()
SmartValidators.email
SmartValidators.password
SmartValidators.phone
SmartValidators.username
SmartValidators.name
SmartValidators.url
SmartValidators.number
SmartValidators.minLength(8)
SmartValidators.maxLength(20)
SmartValidators.confirmPassword(passwordController.text)
SmartValidators.compose([
  SmartValidators.required(),
  SmartValidators.minLength(3),
])

Built-in Formatters

SmartFormatters.digitsOnly
SmartFormatters.lettersOnly
SmartFormatters.lettersAndSpaces
SmartFormatters.alphanumeric
SmartFormatters.username
SmartFormatters.decimal
SmartFormatters.phone
SmartFormatters.currency
SmartFormatters.uppercase
SmartFormatters.lowercase
SmartFormatters.email
SmartFormatters.noSpaces
SmartFormatters.creditCard
SmartFormatters.maxLength(10)

Custom Theme

SmartTextFieldThemeProvider(
  theme: SmartTextFieldTheme(
    borderRadius: 16.0,
    borderColor: Colors.grey.shade300,
    focusedBorderColor: Colors.purple,
    errorBorderColor: Colors.red,
    filledColor: Colors.grey.shade100,
    textColor: Colors.black87,
    hintColor: Colors.grey,
    fontSize: 14.0,
  ),
  child: MaterialApp(...)
)

Package Structure

lib/

├── smart_advanced_text_field.dart

└── src/

├── enums/

├── theme/

├── styles/

├── validators/

├── formatters/

├── otp/

└── widgets/

├── smart_text_field_widget.dart

├── smart_text_form_field_widget.dart

├── date/

├── dropdown/

├── richtext/

├── rating/

├── tags/

├── colorpicker/

├── phone/

├── signature/

├── imagepicker/

├── slider/

├── switch/

└── checkbox/

Package Structure

lib/

├── smart_advanced_text_field.dart ← single import entry point

└── src/

├── enums/

│ ├── field_style.dart ← FieldStyle enum

│ └── input_type.dart ← AppInputType enum

├── theme/

│ └── smart_advanced_text_field_theme.dart

├── styles/

│ └── field_decoration.dart

├── widgets/

│ ├── smart_advanced_text_field_widget.dart

│ └── smart_text_form_field_widget.dart

├── otp/

│ └── smart_otp_field.dart

├── validators/

│ └── validators.dart

└── formatters/

└── input_formatters.dart

About

This package is built and maintained by Smart Solutions Team.

We build professional, reusable Flutter packages and components to help developers ship faster and cleaner apps.

Credits

Built with ❤️ by Smart Solutions Team

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

smart_advanced_text_field

Features

Installation

Setup — Global Theme

Field Styles

Input Types

Named Constructors

Form Validation

Built-in Validators

Built-in Formatters

Custom Theme

Widgets

1. SmartTextField

2. SmartTextFormField

3. SmartOtpField

4. SmartDateField

5. SmartDropdownField

6. SmartRichTextField

7. SmartRatingField

8. SmartTagsField

9. SmartColorPickerField

10. SmartPhoneField

11. SmartSignatureField

12. SmartImagePickerField

13. SmartSliderField

14. SmartSwitchField

15. SmartCheckboxField

16. SmartRadioField

17. SmartStepperField

18. SmartPinField

Field Styles

Built-in Validators

Built-in Formatters

Custom Theme

Package Structure

Package Structure

About

Credits

Contributing

License

Libraries

smart_advanced_text_field package