retcore_field 0.0.3

A highly customizable and feature-rich TextField widget for Flutter with built-in support for password fields, date pickers, validation, and theming.

RetCoreField

A highly customizable and feature-rich TextField widget for Flutter with built-in support for password fields, date pickers, validation, and theming. Simplifies form creation with a clean, theme-based API that separates styling from functionality.

---

Key Features

✨ Rich Feature Set

• 🔐 Password Fields - Built-in visibility toggle with eye icon
• 📅 Date Picker - Integrated calendar picker with formatted date output
• ✅ Conditional Validation - Enable/disable validation with isRequired flag
• 🎨 Theme-Based Styling - Separate colors and sizes for clean architecture
• 🎯 Prefix & Suffix Icons - Easy icon integration
• 📝 Required Field Indicator - Automatic asterisk (*) for required fields
• 🧹 Clear Button - One-tap to clear text (show/hide based on content)
• 📊 Strength Meter - Real-time password strength visual feedback
• ✅ Smart Presets - Built-in validation & keyboards (Email, Phone, URL, etc.)
• ♿ Accessible - Proper focus management and keyboard handling

🏗️ Clean Architecture

• Separation of styling (theme) from functionality (widget)
• Global color and size management via static classes
• Easy customization through copyWith method
• Production-ready with comprehensive validation support

Installation

Add this to your package's pubspec.yaml file:

dependencies: retcore_field:

Customization

Theme Structure

RetCoreField uses three main components for theming:

1. RetCoreFieldTheme - Main theme class that combines colors and sizes

Available Theme Properties

Text Styles

• inputTextStyle - Style for input text
• hintTextStyle - Style for hint text
• labelTextStyle - Style for label text
• errorTextStyle - Style for error messages
• requiredAsteriskStyle - Style for the required asterisk (*)

Icon Properties

• prefixIconColor - Color for prefix icons
• prefixIconSize - Size for prefix icons
• suffixIconColor - Color for suffix icons
• suffixIconSize - Size for suffix icons

Border Properties

• borderColor - Color for enabled border
• focusedBorderColor - Color for focused border
• errorBorderColor - Color for error border
• borderRadius - Corner radius for borders
• Custom borders: enabledBorder, focusedBorder, errorBorder, focusedErrorBorder, disabledBorder

Background

• filled - Whether to fill the field
• fillColor - Background fill color

Cursor

• cursorColor - Cursor color
• cursorWidth - Cursor width
• cursorHeight - Cursor height
• cursorRadius - Cursor corner radius

Layout

• isDense - Use dense layout
• contentPadding - Internal padding
• errorMaxLines - Max lines for error text

Widget Properties

Property	Type	Description	Default
controller	TextEditingController?	Controls the text being edited	null
labelText	String?	Label text above the field	null
hintText	String?	Hint text when field is empty	null
isPassword	bool	Enable password mode with toggle	false
isDatePicker	bool	Enable date picker mode	false
isRequired	bool	Enable validation (shows asterisk)	false
prefixIcon	IconData?	Icon before input text	null
suffixIcon	IconData?	Icon after input text	null
validator	FormFieldValidator<String>?	Validation function	null
onChanged	ValueChanged<String>?	Callback on text change	null
keyboardType	TextInputType?	Keyboard type	null
maxLength	int?	Maximum character length	null
maxLines	int?	Maximum number of lines	1
enabled	bool?	Whether field is enabled	true
readOnly	bool	Whether field is read-only	false
type	RetCoreFieldType?	Smart presets (email, phone, url, number, text)	null
showClearButton	bool	Whether to show the clear icon	false
showStrengthMeter	bool	Whether to show password strength meter	false
prefixText	String?	Leading literal text (e.g., "$ ")	null
suffixText	String?	Trailing literal text (e.g., " kg")	null
helpText	String?	Persistent helper text below the field	null
theme	RetCoreFieldTheme	Visual theme (required)	-

Quick Start

Import the package and use the RetCoreField widget with its default theme.

import 'package:flutter/material.dart';
import 'package:retcore_field/retcore_field.dart';

class MyForm extends StatelessWidget {
  final _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return RetCoreField(
      controller: _emailController,
      labelText: 'Email',
      hintText: 'Enter your email',
      prefixIcon: Icons.email_outlined,
      theme: RetCoreFieldTheme.defaultTheme(),
    );
  }
}

Examples

1. Email Field with Validation

RetCoreField(
  controller: _emailController,
  labelText: 'Email',
  hintText: '[e-mail]',
  prefixIcon: Icons.email_outlined,
  keyboardType: TextInputType.emailAddress,
  isRequired: true, // Enables validation and shows '*'
  theme: RetCoreFieldTheme.defaultTheme(),
  validator: (value) {
    if (value == null || !value.contains('@')) {
      return 'Please enter a valid email address';
    }
    return null;
  },
)

2. Password Field with Visibility Toggle

RetCoreField(
  controller: _passwordController,
  isPassword: true, // Enables password mode
  labelText: 'Password',
  hintText: 'Enter your password',
  prefixIcon: Icons.lock_outline,
  isRequired: true,
  theme: RetCoreFieldTheme.defaultTheme(),
  validator: (value) {
    if (value == null || value.length < 6) {
      return 'Password must be at least 6 characters';
    }
    return null;
  },
)

3. Date Picker Field

RetCoreField(
  controller: _dobController,
  isDatePicker: true, // Enables date picker
  labelText: 'Date of Birth',
  hintText: 'Select your birth date',
  readOnly: true, // Important: Prevents keyboard from appearing
  prefixIcon: Icons.calendar_month_outlined,
  theme: RetCoreFieldTheme.defaultTheme(),
  initialDate: DateTime(2000, 1, 1),
  startingDate: DateTime(1950),
  endingDate: DateTime.now(),
)

#### 4. Password with Real-time Strength Meter

```dart
RetCoreField(
  controller: _passwordController,
  isPassword: true,
  showStrengthMeter: true, // Enables visual feedback
  labelText: 'Secure Password',
  prefixIcon: Icons.lock_outline,
  isRequired: true,
  theme: RetCoreFieldTheme.defaultTheme(),
)

5. Smart Presets & Clear Button

RetCoreField(
  controller: _emailController,
  type: RetCoreFieldType.email, // Auto-configures validation & keyboard
  showClearButton: true,        // Shows 'X' when text is present
  labelText: 'Email Address',
  theme: RetCoreFieldTheme.defaultTheme(),
)

6. Prefix & Suffix Text (Currency/Units)

RetCoreField(
  controller: _priceController,
  type: RetCoreFieldType.number,
  prefixText: '\$ ',
  suffixText: ' USD',
  labelText: 'Price',
  theme: RetCoreFieldTheme.defaultTheme(),
)

7. Multi-line Text Area

RetCoreField(
  controller: _bioController,
  labelText: 'Bio',
  hintText: 'Tell us about yourself',
  maxLines: 5,
  maxLength: 500,
  theme: RetCoreFieldTheme.defaultTheme(),
)

Complete Form Example

import 'package:flutter/material.dart';
import 'package:retcore_field/retcore_field.dart';

class RegistrationForm extends StatefulWidget {
  @override
  _RegistrationFormState createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<registrationform> {
  final _formKey = GlobalKey<formstate>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _dobController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    _dobController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Registration')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              // Email Field
              RetCoreField(
                controller: _emailController,
                labelText: 'Email',
                prefixIcon: Icons.email_outlined,
                keyboardType: TextInputType.emailAddress,
                isRequired: true,
                theme: RetCoreFieldTheme.defaultTheme(),
                validator: (value) => (value?.isEmpty ?? true) ? 'Email is required' : null,
              ),
              SizedBox(height: 20),

              // Password Field
              RetCoreField(
                controller: _passwordController,
                isPassword: true,
                labelText: 'Password',
                prefixIcon: Icons.lock_outline,
                isRequired: true,
                theme: RetCoreFieldTheme.defaultTheme(),
                validator: (value) => (value?.length ?? 0) < 6 ? 'Password must be at least 6 characters' : null,
              ),
              SizedBox(height: 20),

              // Date of Birth
              RetCoreField(
                controller: _dobController,
                isDatePicker: true,
                labelText: 'Date of Birth',
                readOnly: true,
                prefixIcon: Icons.calendar_month_outlined,
                theme: RetCoreFieldTheme.defaultTheme(),
              ),
              SizedBox(height: 30),

              // Submit Button
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data...')),
                    );
                  }
                },
                child: Text('Register'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Issues

If you encounter any issues or have feature requests, please file them in the issue tracker.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Samiul Haque

• GitHub: @samiulhaquereal

Changelog

See CHANGELOG.md for a list of changes.

---

Made with ❤️ for the Flutter community