Chromia UI provides two dropdown components: ChromiaDropdown for simple selections and ChromiaRichDropdown for items with icons and descriptions.
ChromiaDropdown
A customizable dropdown component for selecting from a list of options.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
String? selectedValue;
ChromiaDropdown<String>(
value: selectedValue,
items: ['Option 1', 'Option 2', 'Option 3'],
onChanged: (value) => setState(() => selectedValue = value),
label: 'Select an option',
)
With Hint Text
Display hint text when no value is selected:
ChromiaDropdown<String>(
value: selectedValue,
items: ['Red', 'Green', 'Blue'],
hint: 'Choose a color',
label: 'Color',
onChanged: (value) => setState(() => selectedValue = value),
)
With Helper Text
Add helper text below the dropdown:
ChromiaDropdown<String>(
value: selectedCountry,
items: ['USA', 'Canada', 'Mexico'],
label: 'Country',
helperText: 'Select your country of residence',
onChanged: (value) => setState(() => selectedCountry = value),
)
With Error State
Display an error message:
ChromiaDropdown<String>(
value: selectedValue,
items: ['Option 1', 'Option 2'],
label: 'Required Field',
errorText: 'Please select an option',
onChanged: (value) => setState(() => selectedValue = value),
)
With Prefix Icon
Add an icon before the dropdown:
ChromiaDropdown<String>(
value: selectedLanguage,
items: ['English', 'Spanish', 'French'],
label: 'Language',
prefixIcon: Icon(Icons.language),
onChanged: (value) => setState(() => selectedLanguage = value),
)
With Custom Item Builder
Customize how items are displayed:
enum Status { active, inactive, pending }
Status? selectedStatus;
ChromiaDropdown<Status>(
value: selectedStatus,
items: Status.values,
label: 'Status',
itemBuilder: (status) {
switch (status) {
case Status.active:
return 'Active';
case Status.inactive:
return 'Inactive';
case Status.pending:
return 'Pending';
}
},
onChanged: (value) => setState(() => selectedStatus = value),
)
Disabled Dropdown
Disable the dropdown:
ChromiaDropdown<String>(
value: selectedValue,
items: ['Option 1', 'Option 2'],
label: 'Disabled',
enabled: false,
onChanged: null,
)
ChromiaDropdown Parameters
Currently selected value.
List of items to display.
onChanged
ValueChanged<T?>?
required
Called when the selection changes. Set to null to disable.
Label text displayed above the dropdown.
Hint text when no value is selected.
Helper text below the dropdown.
Error text (replaces helper text when present).
Icon to display before the dropdown.
Custom builder for dropdown items.
Whether the dropdown is enabled.
ChromiaRichDropdown
A dropdown with rich items that support icons and descriptions.
Basic Usage
String? selectedOption;
ChromiaRichDropdown<String>(
value: selectedOption,
items: [
ChromiaDropdownItem(
value: 'home',
label: 'Home',
icon: Icons.home,
description: 'Go to home page',
),
ChromiaDropdownItem(
value: 'settings',
label: 'Settings',
icon: Icons.settings,
description: 'Configure your preferences',
),
ChromiaDropdownItem(
value: 'profile',
label: 'Profile',
icon: Icons.person,
description: 'View and edit your profile',
),
],
label: 'Navigate to',
onChanged: (value) => setState(() => selectedOption = value),
)
Without Descriptions
ChromiaRichDropdown<String>(
value: selectedTheme,
items: [
ChromiaDropdownItem(
value: 'light',
label: 'Light Theme',
icon: Icons.light_mode,
),
ChromiaDropdownItem(
value: 'dark',
label: 'Dark Theme',
icon: Icons.dark_mode,
),
ChromiaDropdownItem(
value: 'system',
label: 'System Default',
icon: Icons.brightness_auto,
),
],
label: 'Theme',
hint: 'Select a theme',
onChanged: (value) => setState(() => selectedTheme = value),
)
With Helper and Error Text
ChromiaRichDropdown<String>(
value: selectedPayment,
items: [
ChromiaDropdownItem(
value: 'card',
label: 'Credit Card',
icon: Icons.credit_card,
description: 'Pay with credit or debit card',
),
ChromiaDropdownItem(
value: 'paypal',
label: 'PayPal',
icon: Icons.account_balance,
description: 'Pay with your PayPal account',
),
],
label: 'Payment Method',
helperText: 'Choose your preferred payment method',
errorText: isValid ? null : 'Please select a payment method',
onChanged: (value) => setState(() => selectedPayment = value),
)
ChromiaRichDropdown Parameters
Currently selected value.
items
List<ChromiaDropdownItem<T>>
required
List of rich items to display.
onChanged
ValueChanged<T?>?
required
Called when the selection changes.
Hint text when no value is selected.
Helper text below the dropdown.
Whether the dropdown is enabled.
ChromiaDropdownItem
Optional description shown in the dropdown menu.
Use Cases
Country Selector
String? selectedCountry;
final countries = ['United States', 'Canada', 'United Kingdom', 'Australia'];
ChromiaDropdown<String>(
value: selectedCountry,
items: countries,
label: 'Country',
hint: 'Select your country',
prefixIcon: Icon(Icons.public),
helperText: 'Required for shipping',
onChanged: (value) => setState(() => selectedCountry = value),
)
Category Filter
String? selectedCategory;
ChromiaRichDropdown<String>(
value: selectedCategory,
items: [
ChromiaDropdownItem(
value: 'all',
label: 'All Categories',
icon: Icons.category,
),
ChromiaDropdownItem(
value: 'electronics',
label: 'Electronics',
icon: Icons.devices,
),
ChromiaDropdownItem(
value: 'clothing',
label: 'Clothing',
icon: Icons.checkroom,
),
ChromiaDropdownItem(
value: 'books',
label: 'Books',
icon: Icons.book,
),
],
label: 'Category',
onChanged: (value) {
setState(() => selectedCategory = value);
// Apply filter
},
)
Priority Selector
enum Priority { low, medium, high, urgent }
Priority? selectedPriority;
ChromiaRichDropdown<Priority>(
value: selectedPriority,
items: [
ChromiaDropdownItem(
value: Priority.low,
label: 'Low Priority',
icon: Icons.arrow_downward,
description: 'Can be completed anytime',
),
ChromiaDropdownItem(
value: Priority.medium,
label: 'Medium Priority',
icon: Icons.remove,
description: 'Should be completed soon',
),
ChromiaDropdownItem(
value: Priority.high,
label: 'High Priority',
icon: Icons.arrow_upward,
description: 'Needs immediate attention',
),
ChromiaDropdownItem(
value: Priority.urgent,
label: 'Urgent',
icon: Icons.priority_high,
description: 'Critical - complete ASAP',
),
],
label: 'Task Priority',
onChanged: (value) => setState(() => selectedPriority = value),
)
Language Selector
String? selectedLanguage;
ChromiaDropdown<String>(
value: selectedLanguage,
items: ['English', 'Español', 'Français', 'Deutsch', '日本語'],
label: 'Language',
prefixIcon: Icon(Icons.language),
hint: 'Choose language',
onChanged: (value) {
setState(() => selectedLanguage = value);
// Update app locale
},
)
