Dropdown Widget

Estimated reading: 4 minutes 27 views

FlutKit provides CustomDropdownButton, a styled dropdown selection component. It provides multiple visual variants (solid, soft, outline), flexible alignment, and responsive behavior while maintaining a consistent design language across the UI.

Common Use Cases

Status or category selection
Filtering data (e.g. status, priority, type)
Switching modes or configurations
Compact selection controls in toolbars and forms
Consistent dropdown styling across dashboards

Constructor

Dart

CustomDropdownButton<String>({
  Key? key,
  required String label,
  required Color color,
  required List<DropdownMenuItem<String>> items,
  required String? value,
  required void Function(String?) onChanged,
  Color? labelColor = Colors.white,
  Color? bgColor,
  void Function()? onTap,
  bool isExpanded = false,
  AlignmentDirectional alignment = AlignmentDirectional.center,
  DropdownType type = DropdownType.solid,
})

CustomDropdownButton<String>({
  Key? key,
  required String label,
  required Color color,
  required List<DropdownMenuItem<String>> items,
  required String? value,
  required void Function(String?) onChanged,
  Color? labelColor = Colors.white,
  Color? bgColor,
  void Function()? onTap,
  bool isExpanded = false,
  AlignmentDirectional alignment = AlignmentDirectional.center,
  DropdownType type = DropdownType.solid,
})

Parameters

Parameter	Description
`label`	Text label displayed inside the dropdown button.
`color`	Primary color used for the dropdown (background, border, or accent depending on type).
`items`	List of `DropdownMenuItem<T>` representing selectable options.
`value`	Currently selected value. Must match one of the provided items.
`onChanged`	Callback triggered when the selected value changes.
`labelColor`	Color of the label text. Defaults to white.
`bgColor`	Optional background color override.
`onTap`	Callback executed when the dropdown is tapped.
`isExpanded`	If `true`, the dropdown expands to fill the available horizontal space.
`alignment`	Controls the alignment of the dropdown content.
`type`	Visual style of the dropdown (`solid`, `soft`, or `outline`).

Dropdown Types

DropdownType.solid
Fully filled background using the provided color.
DropdownType.soft
Softer appearance with subtle background emphasis.
DropdownType.outline
Transparent background with a colored border.

Usage Examples

Solid Dropdown (Default)

Dart

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  labelColor: Colors.white,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  labelColor: Colors.white,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Soft Dropdown

Dart

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  type: DropdownType.soft,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  type: DropdownType.soft,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Outline Dropdown

Dart

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  type: DropdownType.outline,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  type: DropdownType.outline,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Expanded Dropdown (Full Width)

Dart

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  labelColor: Colors.white,
  isExpanded: true,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

CustomDropdownButton<String>(
  label: 'Primary',
  color: kPrimaryColor,
  labelColor: Colors.white,
  isExpanded: true,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Custom Alignment (Start-Aligned)

Dart

CustomDropdownButton<String>(
  label: 'Secondary',
  color: kSecondaryColor,
  labelColor: Colors.white,
  isExpanded: true,
  alignment: AlignmentDirectional.centerStart,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

CustomDropdownButton<String>(
  label: 'Secondary',
  color: kSecondaryColor,
  labelColor: Colors.white,
  isExpanded: true,
  alignment: AlignmentDirectional.centerStart,
  items: dropdownitems,
  value: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
),

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Dropdowns section.

Dart

Base UI → Dropdowns

Base UI → Dropdowns

Best Practices

Always ensure value exists in the provided items list.
Use isExpanded = true in forms or narrow layouts to prevent overflow.
Choose solid for primary actions, soft for secondary controls, and outline for minimal UI.
Keep dropdown labels short and clear to maintain readability.

Summary

CustomDropdownButton provides a flexible, theme-aware dropdown solution for FlutKit dashboards. With multiple visual styles, alignment control, and expansion support, it can be easily adapted for toolbars, forms, and filters while preserving UI consistency.

You can find more usage examples in the FlutKit demo under Form Components > Dropdowns, where each variant includes a Show Code option for quick copy and integration.