gt_dropdown #

A highly customizable and feature-rich dropdown widget for Flutter, offering seamless integration with forms, validation, search, and extensive styling options.

Features #

• ✅ Full Layout Customization: Use itemBuilder to create any item UI
• ✅ Type-Safe Generic Support: Works with any model class via generic type parameter
• ✅ Icon Support: Add prefixIcon, suffixIcon, leadingIcon, or trailingIcon
• ✅ Enable/Disable: Control interaction with enabled property
• ✅ Complete Styling: MenuStyle, border radius, colors, elevation
• ✅ Validation: Display validation messages with validationMessage
• ✅ Search & Filter: Built-in search and filter capabilities
• ✅ Smooth Animations: Native Flutter DropdownMenu animations

Getting Started #

Add gt_dropdown as a dependency in your pubspec.yaml file:

dependencies:
  gt_dropdown: ^1.1.0

Then run:

flutter pub get

Usage #

Basic String Dropdown #

import 'package:gt_dropdown/gt_dropdown.dart';

CustomDropdown<String>(
  items: ['Apple', 'Banana', 'Orange'],
  itemBuilder: (context, item) => Text(item),
  onSelected: (value) => print('Selected: $value'),
  label: const Text('Choose Fruit'),
  hintText: 'Select a fruit',
)

Model Class with Custom Layout #

class Country {
  final String name;
  final String flag;
  Country(this.name, this.flag);
  
  @override
  String toString() => name;
}

CustomDropdown<Country>(
  items: [
    Country('USA', '🇺🇸'),
    Country('India', '🇮🇳'),
    Country('Japan', '🇯🇵'),
  ],
  itemBuilder: (context, country) => Row(
    children: [
      Text(country.flag, style: const TextStyle(fontSize: 20)),
      const SizedBox(width: 10),
      Text(country.name),
    ],
  ),
  onSelected: (value) => setState(() => selectedCountry = value),
  label: const Text('Country'),
  hintText: 'Select your country',
  prefixIcon: const Icon(Icons.flag, size: 20),
)

With Validation #

CustomDropdown<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  itemBuilder: (context, item) => Text(item),
  onSelected: (value) => setState(() => selected = value),
  label: const Text('Required Field'),
  hintText: 'Please select an option',
  validationMessage: selected == null ? 'This field is required' : null,
)

Searchable Dropdown #

CustomDropdown<String>(
  items: [
    'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola',
    'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan',
    // ... more items
  ],
  itemBuilder: (context, item) => Text(item),
  onSelected: (value) => print(value),
  enableSearch: true,
  label: const Text('Search Country'),
  hintText: 'Type to search...',
  menuHeight: 300,
  prefixIcon: const Icon(Icons.search, size: 20),
)

Custom Styling #

CustomDropdown<String>(
  items: ['Light', 'Dark', 'Auto'],
  itemBuilder: (context, item) => Text(item),
  onSelected: (value) => print(value),
  label: const Text('Theme'),
  borderRadius: 12,
  menuBackgroundColor: Colors.grey.shade50,
  menuElevation: 6,
  prefixIcon: const Icon(Icons.palette, size: 20),
)

Disabled Dropdown #

CustomDropdown<String>(
  items: ['Option 1', 'Option 2'],
  initialSelection: 'Option 1',
  itemBuilder: (context, item) => Text(item),
  onSelected: (value) {},
  enabled: false,
  label: const Text('Locked Selection'),
  prefixIcon: const Icon(Icons.lock, size: 20),
)

CustomDropdown Properties #

Migration from GTDropdown (v1.0.x) #

The legacy GTDropdown is still available but deprecated. To migrate:

// Old way (deprecated)
GTDropdown<String>(
  items: const ['Option 1', 'Option 2'],
  defaultText: 'Select an option',
  onChanged: (value) => print(value),
)

// New way (recommended)
CustomDropdown<String>(
  items: const ['Option 1', 'Option 2'],
  itemBuilder: (context, item) => Text(item),
  hintText: 'Select an option',
  onSelected: (value) => print(value),
)

See Also #

• GitHub Repository
• LinkedIn