components/forms/flutstrap_form_group library Components Forms

Flutstrap Form Group

A high-performance, accessible form group component for grouping related form fields with consistent spacing, validation states, and layout options.

{@tool snippet}

Basic Usage

// Vertical form group
FlutstrapFormGroup(
  label: 'Personal Information',
  children: [
    FlutstrapInput(labelText: 'First Name'),
    FlutstrapInput(labelText: 'Last Name'),
    FlutstrapInput(labelText: 'Email'),
  ],
)

// Horizontal form group with validation
FlutstrapFormGroup(
  label: 'Contact Details',
  layout: FSFormGroupLayout.horizontal,
  showValidation: true,
  isValid: false,
  validationMessage: 'Please fill all required fields',
  children: [
    FlutstrapInput(labelText: 'Phone'),
    FlutstrapInput(labelText: 'Email'),
  ],
)

// Inline form group for filters
FlutstrapFormGroup(
  label: 'Filters',
  layout: FSFormGroupLayout.inline,
  spacing: 12.0,
  children: [
    FlutstrapInput(labelText: 'Search'),
    FlutstrapDropdown(items: [...]),
    FlutstrapButton(child: Text('Apply')),
  ],
)

Performance Features

  • Style Caching: Form group styles cached by size, state, and theme
  • Efficient List Building: Optimized child spacing with pre-allocated lists
  • Minimal Rebuilds: Const constructor and efficient state management
  • Memory Management: Proper resource disposal and cache management

Accessibility

  • Full screen reader support with semantic labels
  • Focus traversal for keyboard navigation
  • Proper ARIA attributes for form groups
  • High contrast support for all states
  • Clear validation state announcements

When to Use

  • Grouping related form fields (name, email, phone)
  • Showing collective validation states
  • Creating consistent form layouts
  • Building complex forms with multiple sections

Layout Options

  • Vertical: Stacked fields (default)
  • Horizontal: Side-by-side fields
  • Inline: Wrap-based layout for dynamic sizing

Performance Tips

  • Use const for children when possible to prevent unnecessary rebuilds
  • Avoid deeply nested form groups for better performance
  • Use spacing parameter instead of wrapping in SizedBox widgets
  • Prefer inline layout for dynamic content over horizontal

Classes

FlutstrapFormGroup
Flutstrap Form Group Component
FSFormGroupConfig
Form Group Configuration

Enums

FSFormGroupLayout
Form Group Layout Variants
FSFormGroupSize
Form Group Size Variants
FSFormGroupState
Form Group State