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

Property	Type	Description
items	List<T>?	List of items to display
itemBuilder	Widget Function(BuildContext, T)	Builder for each dropdown item
onSelected	ValueChanged<T?>?	Callback when an item is selected
initialSelection	T?	Initially selected value
enabled	bool	Whether the dropdown is enabled
enableSearch	bool	Enable search functionality
enableFilter	bool	Enable filter functionality
label	Widget?	Label widget above the dropdown
hintText	String?	Hint text when nothing is selected
validationMessage	String?	Validation error message
prefixIcon	Widget?	Icon before the selected text
suffixIcon	Widget?	Icon after the selected text
width	double?	Custom width for the dropdown
menuHeight	double?	Maximum height of the dropdown menu
borderRadius	double?	Border radius for the menu
menuBackgroundColor	Color?	Background color of the menu
menuElevation	double?	Elevation of the dropdown menu
menuStyle	MenuStyle?	Complete menu style customization

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