components/forms/flutstrap_textarea library Components Forms

Flutstrap TextArea

A high-performance, accessible multi-line text input field with comprehensive validation, auto-resize, and optimized rendering patterns.

{@tool snippet}

Basic Usage

// Basic textarea
FlutstrapTextArea(
  label: 'Description',
  placeholder: 'Enter your description...',
  rows: 4,
)

// Textarea with character counter
FlutstrapTextArea(
  label: 'Bio',
  maxLength: 500,
  showCharacterCounter: true,
  rows: 3,
)

// Auto-resizing textarea
FlutstrapTextArea(
  label: 'Notes',
  autoResize: true,
  placeholder: 'Start typing...',
)

// Programmatic control
final textareaKey = GlobalKey<FlutstrapTextAreaState>();
FlutstrapTextArea(
  key: textareaKey,
  label: 'Controlled textarea',
)

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

{@end-tool}

Performance Features

  • Debounced Auto-Resize: Optimized resizing with configurable delays
  • Style Caching: Textarea styles cached by size, variant, 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 validation states
  • High contrast support for visually impaired users

Auto-Resize Behavior

When autoResize: true, the textarea will automatically adjust its height based on content. Use resizeDelay to control the debounce timing for optimal performance during rapid typing.

Enums

FSTextAreaSize
TextArea Size Variants
FSTextAreaVariant
TextArea Variants (colors)