Dropdown Form

Estimated reading: 5 minutes 22 views

FlutKit provides flexible and form-ready dropdown components designed to work seamlessly with validation, theming, and responsive layouts. These components extend Flutter’s native dropdown capabilities while maintaining consistent styling across the dashboard UI.

This section covers:

CustomDropdownFormField
MultipleDropdown

CustomDropdownFormField

CustomDropdownFormField is a form-integrated dropdown widget built on top of Flutter’s FormField pattern. It supports validation, initial values, custom icons, different sizes, rounded styles, and success/error states.

Common Use Cases

Selecting countries, languages, or regions
Choosing plans, roles, or permissions
Payment method selection
Any single-choice form input with validation

Constructor

Dart

CustomDropdownFormField<String>({
  Key? key,
  required List<DropdownMenuItem<String>>? items,
  String? initialValue,
  void Function(String?)? onChanged,
  String? Function(String?)? validator,
  void Function(String?)? onSaved,
  InputDecoration? decoration,
  AutovalidateMode? autovalidateMode,
  bool isExpanded = true,
  Widget? hint,
  Widget? disabledHint,
  IconData? icon,
  double? iconSize,
  Color? dropdownColor,
  EdgeInsetsGeometry? padding,
  bool enabled = true,
  Widget Function(String)? customErrorBuilder,
  IconData? prefixIcon,
  FormSize size = FormSize.medium,
  double radius = defaultRadius,
  double? prefixIconSize,
  String? successMessage,
})

CustomDropdownFormField<String>({
  Key? key,
  required List<DropdownMenuItem<String>>? items,
  String? initialValue,
  void Function(String?)? onChanged,
  String? Function(String?)? validator,
  void Function(String?)? onSaved,
  InputDecoration? decoration,
  AutovalidateMode? autovalidateMode,
  bool isExpanded = true,
  Widget? hint,
  Widget? disabledHint,
  IconData? icon,
  double? iconSize,
  Color? dropdownColor,
  EdgeInsetsGeometry? padding,
  bool enabled = true,
  Widget Function(String)? customErrorBuilder,
  IconData? prefixIcon,
  FormSize size = FormSize.medium,
  double radius = defaultRadius,
  double? prefixIconSize,
  String? successMessage,
})

Key Parameters

Parameter	Description
`items`	List of dropdown menu items
`initialValue`	Default selected value
`onChanged`	Callback when value changes
`validator`	Validation logic for forms
`hint`	Placeholder when no value is selected
`icon`	Custom dropdown arrow icon
`prefixIcon`	Icon displayed before the field
`enabled`	Enables or disables the dropdown
`size`	Field size (`small`, `medium`, `large`)
`radius`	Border radius for rounded styles
`successMessage`	Optional success feedback message

Example Implementations

Dropdown with Initial Value

Dart

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "id", child: Text("Indonesia")),
    DropdownMenuItem(value: "us", child: Text("USA")),
    DropdownMenuItem(value: "jp", child: Text("Japan")),
  ],
  initialValue: "id",
)

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "id", child: Text("Indonesia")),
    DropdownMenuItem(value: "us", child: Text("USA")),
    DropdownMenuItem(value: "jp", child: Text("Japan")),
  ],
  initialValue: "id",
)

Dropdown with Hint and Custom Icon

Dart

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "paypal", child: Text("PayPal")),
    DropdownMenuItem(value: "credit_card", child: Text("Credit Card")),
    DropdownMenuItem(value: "bank", child: Text("Bank Transfer")),
  ],
  hint: Text('Select Payment'),
  icon: Icon(Icons.payment),
)

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "paypal", child: Text("PayPal")),
    DropdownMenuItem(value: "credit_card", child: Text("Credit Card")),
    DropdownMenuItem(value: "bank", child: Text("Bank Transfer")),
  ],
  hint: Text('Select Payment'),
  icon: Icon(Icons.payment),
)

Rounded Dropdown

Dart

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "en", child: Text("English")),
    DropdownMenuItem(value: "id", child: Text("Bahasa Indonesia")),
    DropdownMenuItem(value: "jp", child: Text("日本語")),
  ],
  initialValue: "en",
  radius: 50,
)

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "en", child: Text("English")),
    DropdownMenuItem(value: "id", child: Text("Bahasa Indonesia")),
    DropdownMenuItem(value: "jp", child: Text("日本語")),
  ],
  initialValue: "en",
  radius: 50,
)

Disabled Dropdown

Dart

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "admin", child: Text("Admin")),
    DropdownMenuItem(value: "editor", child: Text("Editor")),
    DropdownMenuItem(value: "viewer", child: Text("Viewer")),
  ],
  initialValue: "editor",
  enabled: false,
)

CustomDropdownFormField<String>(
  items: const [
    DropdownMenuItem(value: "admin", child: Text("Admin")),
    DropdownMenuItem(value: "editor", child: Text("Editor")),
    DropdownMenuItem(value: "viewer", child: Text("Viewer")),
  ],
  initialValue: "editor",
  enabled: false,
)

MultipleDropdown

MultipleDropdown allows users to select multiple values from a list and displays the selected items as removable chips. It is ideal for tagging systems, email selection, filters, and multi-assign workflows.

Common Use Cases

Selecting multiple users or email recipients
Tag or label selection
Multi-category filters
Permission or role assignment

Constructor

Dart

MultipleDropdown({
  Key? key,
  required List<String> allChoices,
  List<String> selectedChoices = const [],
  required dynamic Function(List<String>) onSelectionChanged,
  Color? chipColor,
  FormSize size = FormSize.medium,
  String? hint,
  double? radius = defaultRadius,
  bool enabled = true,
})

MultipleDropdown({
  Key? key,
  required List<String> allChoices,
  List<String> selectedChoices = const [],
  required dynamic Function(List<String>) onSelectionChanged,
  Color? chipColor,
  FormSize size = FormSize.medium,
  String? hint,
  double? radius = defaultRadius,
  bool enabled = true,
})

Key Parameters

Parameter	Description
`allChoices`	List of all available options
`selectedChoices`	Pre-selected values
`onSelectionChanged`	Callback with updated selection
`chipColor`	Color of selected chips
`hint`	Placeholder text
`enabled`	Enables or disables interaction
`size`	Component size

Example Implementations

Multiple Dropdown with Initial Values

Dart

MultipleDropdown(
  allChoices: const [
    'Choice 1', 'Choice 2', 'Choice 3', 'Choice 4',
  ],
  selectedChoices: const ['Choice 1', 'Choice 2'],
  onSelectionChanged: (selectedList) {},
)

MultipleDropdown(
  allChoices: const [
    'Choice 1', 'Choice 2', 'Choice 3', 'Choice 4',
  ],
  selectedChoices: const ['Choice 1', 'Choice 2'],
  onSelectionChanged: (selectedList) {},
)

Multiple Dropdown with Hint

Dart

MultipleDropdown(
  allChoices: const [
    'john.doe@domain.com',
    'jane.smith@domain.com',
    'michael.brown@domain.com',
  ],
  hint: 'Select emails...',
  chipColor: kSecondaryColor,
  onSelectionChanged: (selectedList) {},
)

MultipleDropdown(
  allChoices: const [
    'john.doe@domain.com',
    'jane.smith@domain.com',
    'michael.brown@domain.com',
  ],
  hint: 'Select emails...',
  chipColor: kSecondaryColor,
  onSelectionChanged: (selectedList) {},
)

Disabled Multiple Dropdown

Dart

MultipleDropdown(
  allChoices: const [
    'john.doe@domain.com',
    'jane.smith@domain.com',
    'michael.brown@domain.com',
  ],
  selectedChoices: const [
    'jane.smith@domain.com',
  ],
  enabled: false,
  chipColor: kErrorColor,
  onSelectionChanged: (selectedList) {},
)

MultipleDropdown(
  allChoices: const [
    'john.doe@domain.com',
    'jane.smith@domain.com',
    'michael.brown@domain.com',
  ],
  selectedChoices: const [
    'jane.smith@domain.com',
  ],
  enabled: false,
  chipColor: kErrorColor,
  onSelectionChanged: (selectedList) {},
)

Best Practices

Always provide a hint when no initial value is set.
Use validator for required dropdown fields in forms.
Prefer MultipleDropdown over checkbox lists for compact UIs.
Match dropdown size with surrounding form fields for visual consistency.
Disable fields explicitly when values are system-controlled.

Summary

FlutKit dropdown components offer:

Form validation support
Consistent sizing and theming
Single and multi-selection patterns
Clean APIs aligned with Flutter standards

They are designed to be intuitive for developers while delivering a polished user experience across dashboard applications.

Demo

To see this component in action, please refer to the demo available under Forms → Dropdown Form