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

✅ SmartTextField — standalone text field
✅ SmartTextFormField — form-aware text field with validator & onSaved
✅ SmartOtpField — OTP / PIN input with auto-focus jumping
✅ 7 built-in field styles
✅ 13 input types with auto keyboard, formatter, and capitalization
✅ Built-in validators (email, password, phone, username, url, and more)
✅ Built-in input formatters (phone, currency, credit card, and more)
✅ Global theme support via SmartTextFieldThemeProvider
✅ Light and dark theme presets
✅ Named constructors for common fields
✅ Password eye toggle built-in
✅ Search clear button built-in
✅ Paste handling in OTP field

Installation

Add to your pubspec.yaml:

dependencies:
  smart_advanced_text_field:
    path: ../smart_advanced_text_field  # local

Or from pub.dev (after publishing):

dependencies:
  smart_advanced_text_field: ^1.0.0

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)

OTP Field

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

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

Full API Reference

SmartTextField(
  // Controller & Focus
  controller: TextEditingController(),
  focusNode: FocusNode(),
  initialValue: 'Hello',

  // Input
  inputType: AppInputType.email,
  style: FieldStyle.outlined,
  formatters: [SmartFormatters.uppercase],
  autofillHints: [AutofillHints.email],
  textInputAction: TextInputAction.next,
  textCapitalization: TextCapitalization.words,

  // Decoration
  labelText: 'Email',
  hintText: 'Enter email',
  helperText: 'We will never share your email',
  errorText: 'Invalid email',
  prefixIcon: Icons.email_outlined,
  suffixIcon: Icons.check_circle,
  prefixText: '+92',

  // Behavior
  enabled: true,
  readOnly: false,
  obscureText: false,
  showCounter: true,
  autofocus: false,
  maxLength: 100,
  maxLines: 1,
  minLines: 1,

  // Callbacks
  onChanged: (value) {},
  onSubmitted: (value) {},
  onTap: () {},
  onEditingComplete: () {},

  // Theme
  themeOverride: SmartTextFieldTheme(
    borderRadius: 16,
    focusedBorderColor: Colors.purple,
  ),
)

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 ← 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