RX Text Field

A Flutter package providing reactive text field widgets that automatically synchronize with data models. Built for creating forms with automatic two-way data binding.

pub package License: MIT

Features

  • 🔄 Two-way Data Binding: Automatic synchronization between UI and data models
  • 🎯 Type Safety: Generic typing for model data
  • 📋 Form Support: Built-in form validation and state management
  • 🔧 Flexible API: Works with simple values and complex objects
  • 🎨 Full Customization: All standard TextField properties supported
  • ⚡ Reactive Updates: Efficient model-based reactivity

Installation

Add the package to your pubspec.yaml:

dependencies:
  rx_text_field: ^0.1.0

Core Components

ReactiveModel

A wrapper class that makes any data type reactive:

final model = ReactiveModel<String>('initial value');
model.value = 'new value'; // Notifies listeners

RxTextField

A basic reactive text field:

RxTextField<String>(
  model: stringModel,
  decoration: InputDecoration(labelText: 'Name'),
)

RxTextFormField

A form-enabled reactive text field with validation:

RxTextFormField<String>(
  model: emailModel,
  decoration: InputDecoration(labelText: 'Email'),
  validator: (value) => value?.contains('@') ?? false 
    ? null 
    : 'Invalid email',
)

Usage Examples

Simple string binding

final nameModel = ReactiveModel<String>('');

RxTextField<String>(
  model: nameModel,
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

Complex object binding

class User {
  String username;
  String password;
  User({this.username = '', this.password = ''});
}

final userModel = ReactiveModel<User>(User());

RxTextField<User>(
  model: userModel,
  field: (user) => user.username,
  onChanged: (user, value) => user.username = value,
  decoration: InputDecoration(labelText: 'Username'),
)

Form validation

final formKey = GlobalKey<FormState>();
final emailModel = ReactiveModel<String>('');

Form(
  key: formKey,
  child: RxTextFormField<String>(
    model: emailModel,
    decoration: InputDecoration(labelText: 'Email'),
    validator: (value) {
      if (value?.isEmpty ?? true) return 'Email is required';
      if (!value!.contains('@')) return 'Invalid email format';
      return null;
    },
  ),
)

// Validate form
if (formKey.currentState!.validate()) {
  // Form is valid
}

Map binding

final mapModel = ReactiveModel<Map<String, String>>({'name': ''});

RxTextField<Map<String, String>>(
  model: mapModel,
  field: (map) => map['name']!,
  onChanged: (map, value) => map['name'] = value,
  decoration: InputDecoration(labelText: 'Name'),
)

Features and limitations

Supported

  • ✅ Simple value binding
  • ✅ Complex object binding
  • ✅ Form validation
  • ✅ Custom decorations
  • ✅ All standard TextField properties

Limitations

  • ⚠️ Model must implement equality for optimal performance
  • ⚠️ Field and onChanged must be provided together for complex objects

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

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

Libraries

rx_text_field