components/forms/flutstrap_input library Components Forms

Flutstrap Input

A high-performance, accessible text input field with comprehensive validation, multiple variants, and optimized rendering patterns.

{@tool snippet}

Basic Usage

// Basic input
FlutstrapInput(
  labelText: 'Email',
  hintText: 'Enter your email',
  validator: (value) {
    if (value?.isEmpty ?? true) return 'Email is required';
    if (!value!.contains('@')) return 'Enter a valid email';
    return null;
  },
)

// Input with icons and variant
FlutstrapInput(
  labelText: 'Password',
  obscureText: true,
  prefixIcon: Icon(Icons.lock),
  suffixIcon: Icon(Icons.visibility),
  variant: FSInputVariant.success,
)

// Programmatic control
final inputKey = GlobalKey<FlutstrapInputState>();
FlutstrapInput(
  key: inputKey,
  labelText: 'Controlled input',
)

// Later...
inputKey.currentState?.clear();
inputKey.currentState?.focus();

{@end-tool}

Performance Features

  • Debounced Validation: Optimized validation with configurable delays
  • Style Caching: Input styles cached by variant, size, and state
  • Memory Management: Proper timer and controller disposal
  • Efficient Rebuilds: Minimal setState calls during typing

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation with focus management
  • Proper ARIA attributes for web
  • High contrast support for visually impaired users

Validation Features

  • Real-time validation with debouncing
  • Programmatic error control
  • Custom validator functions
  • Visual feedback for different states

Classes

FlutstrapInput
Flutstrap Input Component
FlutstrapInputState

Enums

FSInputSize
Flutstrap Input Sizes
FSInputVariant
Flutstrap Input Variants