AnimatedFormSlot<T> constructor

const AnimatedFormSlot<T>({
  1. Key? key,
  2. required Signal<T> connect,
  3. required Widget to(
    1. BuildContext context,
    2. T value,
    3. FormValidationResult validation,
    4. bool isFocused,
    ),
  4. String? validator(
    1. T value
    )?,
  5. Signal<String?>? errorSignal,
  6. Signal<bool>? focusedSignal,
  7. FormAnimationEffect errorEffect = FormAnimationEffect.shake,
  8. FormAnimationEffect successEffect = FormAnimationEffect.pulse,
  9. Duration animationDuration = const Duration(milliseconds: 300),
  10. Curve animationCurve = Curves.easeInOut,
  11. bool validateOnChange = true,
  12. bool showSuccessAnimation = true,
  13. Duration validationDelay = Duration.zero,
  14. void onValidationChanged(
    1. FormValidationResult result
    )?,
})

Creates an AnimatedFormSlot for form fields with validation animations.

Basic Usage

AnimatedFormSlot<String>(
  connect: controller.email,
  validator: (value) => value.isEmpty ? 'Required' : null,
  to: (context, value, validation, isFocused) => TextField(
    onChanged: (v) => controller.email.emit(v),
    decoration: InputDecoration(
      errorText: validation.errorMessage,
    ),
  ),
)

With Animation Effects

AnimatedFormSlot<String>(
  connect: controller.password,
  validator: (v) => v.length < 8 ? 'Min 8 chars' : null,
  errorEffect: FormAnimationEffect.shake,
  successEffect: FormAnimationEffect.pulse,
  showSuccessAnimation: true,
  to: (context, value, validation, isFocused) => ...
)

Best practices:

  • Use validationDelay for debounced validation on text fields
  • Connect errorSignal to display errors elsewhere in the UI
  • Use focusedSignal to style focused fields differently

Implementation

const AnimatedFormSlot({
  super.key,
  required this.connect,
  required this.to,
  this.validator,
  this.errorSignal,
  this.focusedSignal,
  this.errorEffect = FormAnimationEffect.shake,
  this.successEffect = FormAnimationEffect.pulse,
  this.animationDuration = const Duration(milliseconds: 300),
  this.animationCurve = Curves.easeInOut,
  this.validateOnChange = true,
  this.showSuccessAnimation = true,
  this.validationDelay = Duration.zero,
  this.onValidationChanged,
});