components/dropdowns/flutstrap_dropdown library Components Forms

Flutstrap Dropdown

A high-performance, customizable dropdown menu with Bootstrap-inspired styling, search functionality, and comprehensive accessibility support.

Usage Examples

// Basic dropdown with string values
FlutstrapDropdown<String>(
  items: [
    FSDropdownItem(value: '1', label: 'Option 1'),
    FSDropdownItem(value: '2', label: 'Option 2'),
  ],
  value: selectedValue,
  onChanged: (value) => setState(() => selectedValue = value),
)

// Dropdown with custom objects
FlutstrapDropdown<User>(
  items: users.map((user) => FSDropdownItem(
    value: user,
    label: user.name,
    leading: CircleAvatar(backgroundImage: NetworkImage(user.avatar)),
  )).toList(),
  value: selectedUser,
  onChanged: (user) => setState(() => selectedUser = user),
  showSearch: true,
)

// Disabled dropdown with helper text
FlutstrapDropdown<String>(
  items: items,
  value: selectedValue,
  onChanged: null, // Disables the dropdown
  helperText: 'This field is currently disabled',
  variant: FSDropdownVariant.light,
)

Accessibility

• Full screen reader support with proper semantic labels
• Keyboard navigation support (Tab, Enter, Escape)
• Focus management for search and menu items
• Proper ARIA attributes for expanded state

Usage Examples

// Basic dropdown with string values
FlutstrapDropdown<String>(
  items: [
    FSDropdownItem(value: '1', label: 'Option 1'),
    FSDropdownItem(value: '2', label: 'Option 2'),
  ],
  value: selectedValue,
  onChanged: (value) => setState(() => selectedValue = value),
)

// Dropdown with custom objects
FlutstrapDropdown<User>(
  items: users.map((user) => FSDropdownItem(
    value: user,
    label: user.name,
    leading: CircleAvatar(backgroundImage: NetworkImage(user.avatar)),
  )).toList(),
  value: selectedUser,
  onChanged: (user) => setState(() => selectedUser = user),
  showSearch: true,
)

// Disabled dropdown with helper text
FlutstrapDropdown<String>(
  items: items,
  value: selectedValue,
  onChanged: null, // Disables the dropdown
  helperText: 'This field is currently disabled',
  variant: FSDropdownVariant.light,
)

Accessibility

• Full screen reader support with proper semantic labels
• Keyboard navigation support (Tab, Enter, Escape)
• Focus management for search and menu items
• Proper ARIA attributes for expanded state

Classes

FlutstrapDropdown<T>

Flutstrap Dropdown

FSDropdownItem<T>

Dropdown Item Data

Enums

FSDropdownSize

Flutstrap Dropdown Sizes

FSDropdownVariant

Flutstrap Dropdown Variants