Skip to main content

DropDownFieldAppi

A flexible dropdown widget for Flutter with search, filtering, and mobile-friendly bottom sheet support. Automatically adapts to platform - shows bottom sheet on mobile and dropdown on web.

Features​

  • Responsive Design: Bottom sheet on mobile, dropdown on web
  • Search & Filter: Built-in search functionality
  • Loading States: Shows loading indicator during data fetch
  • Custom Styling: Customizable appearance and behavior
  • Accessibility: Full accessibility support
  • Performance: Optimized for large datasets

Usage​

DropDownFieldAppi<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onChanged: (value) {
    print('Selected: $value');
  },
  loading: false,
  hint: 'Select an option',
  label: 'Choose Option',
)

Parameters​

NameTypeDescription
itemsList<T>The list of items to display in dropdown
onChangedFunction(T?)?Callback when selection changes
loadingbool?Shows loading indicator if true
hintString?Placeholder text when no item selected
labelString?Label text above the dropdown
valueT?Currently selected value
enabledbool?Whether the dropdown is enabled
validatorString? Function(T?)?Validation function
decorationInputDecoration?Custom input decoration
itemBuilderWidget Function(T)?Custom item builder
searchablebool?Enable search functionality
maxHeightdouble?Maximum height of dropdown
dropdownColorColor?Background color of dropdown
styleTextStyle?Text style for selected item
iconWidget?Custom dropdown icon
iconSizedouble?Size of dropdown icon
isExpandedbool?Whether dropdown takes full width
focusNodeFocusNode?Focus node for the dropdown
autofocusbool?Whether to autofocus
onTapVoidCallback?Callback when dropdown is tapped

Usage Examples​

1. Basic Dropdown​

DropDownFieldAppi<String>(
  items: ['Apple', 'Banana', 'Orange'],
  hint: 'Select a fruit',
  onChanged: (value) {
    setState(() {
      selectedFruit = value;
    });
  },
)
DropDownFieldAppi<String>(
  items: countries,
  searchable: true,
  hint: 'Search and select country',
  onChanged: (value) {
    setState(() {
      selectedCountry = value;
    });
  },
)

3. Custom Item Builder​

DropDownFieldAppi<User>(
  items: users,
  itemBuilder: (user) => ListTile(
    leading: CircleAvatar(
      backgroundImage: NetworkImage(user.avatar),
    ),
    title: Text(user.name),
    subtitle: Text(user.email),
  ),
  onChanged: (user) {
    setState(() {
      selectedUser = user;
    });
  },
)

4. With Loading State​

DropDownFieldAppi<String>(
  items: items,
  loading: isLoading,
  hint: 'Loading options...',
  onChanged: (value) {
    // Handle selection
  },
)

5. With Validation​

DropDownFieldAppi<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  validator: (value) {
    if (value == null) {
      return 'Please select an option';
    }
    return null;
  },
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Required Field',
  ),
  onChanged: (value) {
    // Handle selection
  },
)

Best Practices​

  • Use searchable: true for lists with more than 10 items
  • Implement proper loading states for async data
  • Provide clear hint text for better UX
  • Use custom item builders for complex data types
  • Always handle null values in onChanged callback
  • Consider using validation for required fields

Platform Behavior​

  • Mobile: Shows as bottom sheet with search
  • Web/Desktop: Shows as traditional dropdown
  • Tablet: Adapts based on screen size

See Also​