Skip to main content

CwDropDown

Overview​

CwDropDown is a customizable dropdown widget for Flutter that allows users to select from a list of items. It provides flexible styling, animations, and various state management options.

Factory Constructor​

const CwDropDown({
  Key? key,
  this.label,
  this.hint,
  this.icon,
  this.value,
  this.dropDownButtonHeight,
  this.tailWidget,
  this.dropDownButtonWidth,
  this.dropDownButtonBackGroundColor,
  this.dropDownButtonGradient,
  this.dropDownBorder,
  this.dropDownButtonPadding,
  this.dropDownButtonBorder,
  this.dropDownButtonBorderRadius,
  required this.dropDownLabelPosition,
  this.dropDownItems,
  this.dropDownWidth,
  this.dropDownHeight,
  this.dropDownPadding,
  this.dropDownBorderRadius,
  this.dropDownBackGroundColor,
  this.dropDownGradient,
  this.dropDownItemSeparator,
  this.errorWidget,
  this.isDisabled = false,
  this.dropDownItemDividerColor,
  this.dropDownButtonBackGroundFocusColor,
  this.dropDownButtonFocusBorder,
  this.dropDownButtonBackGroundErrorColor,
  this.dropDownButtonErrorBorder,
  this.dropDownButtonBackGroundDisabledColor,
  this.dropDownButtonDisabledBorder,
  required this.onChange,
})

Parameters​

  • label (Widget?) - A label for the dropdown.
  • hint (Text?) - A hint displayed when no item is selected.
  • icon (Widget?) - Custom icon for the dropdown button.
  • value (CwDropDownItem?) - Currently selected item.
  • dropDownButtonHeight (double?) - Height of the dropdown button.
  • dropDownButtonWidth (double?) - Width of the dropdown button.
  • dropDownButtonBackGroundColor (Color?) - Background color of the dropdown button.
  • dropDownButtonGradient (Gradient?) - Gradient for the dropdown button background.
  • dropDownBorder (BoxBorder?) - Border for the dropdown menu.
  • dropDownButtonPadding (EdgeInsetsGeometry?) - Padding inside the dropdown button.
  • dropDownButtonBorder (BoxBorder?) - Border of the dropdown button.
  • dropDownButtonBorderRadius (BorderRadiusGeometry?) - Border radius of the dropdown button.
  • dropDownLabelPosition (DropDownLabelPosition) - Position of the label (inside, outside, onBorder).
  • dropDownItems (List<CwDropDownItem>?) - List of dropdown items.
  • dropDownWidth (double?) - Width of the dropdown menu.
  • dropDownHeight (double?) - Height of the dropdown menu.
  • dropDownPadding (EdgeInsetsGeometry?) - Padding inside the dropdown menu.
  • dropDownBorderRadius (BorderRadiusGeometry?) - Border radius of the dropdown menu.
  • dropDownBackGroundColor (Color?) - Background color of the dropdown menu.
  • dropDownGradient (Gradient?) - Gradient for the dropdown menu background.
  • dropDownItemSeparator (Widget?) - Custom separator between dropdown items.
  • errorWidget (Widget?) - Widget displayed when an error occurs.
  • isDisabled (bool) - Whether the dropdown is disabled.
  • dropDownItemDividerColor (Color?) - Color of the divider between items.
  • dropDownButtonBackGroundFocusColor (Color?) - Background color when focused.
  • dropDownButtonFocusBorder (BoxBorder?) - Border when focused.
  • dropDownButtonBackGroundErrorColor (Color?) - Background color when an error occurs.
  • dropDownButtonErrorBorder (BoxBorder?) - Border when an error occurs.
  • dropDownButtonBackGroundDisabledColor (Color?) - Background color when disabled.
  • dropDownButtonDisabledBorder (BoxBorder?) - Border when disabled.
  • onChange (ValueChanged<T?>) - Callback when a new item is selected.

Usage Example​

CwDropDown<String>(
  label: Text("Select an option"),
  hint: Text("Choose one"),
  dropDownLabelPosition: DropDownLabelPosition.outside,
  dropDownItems: [
    CwDropDownItem(value: "Option 1", item: Text("Option 1")),
    CwDropDownItem(value: "Option 2", item: Text("Option 2")),
  ],
  onChange: (value) {
    print("Selected: $value");
  },
)

Customization​

  • Styling: Modify colors, gradients, borders, and paddings.
  • Icons: Use custom icons instead of the default arrow.
  • Animations: Controlled via AnimationController.
  • Error Handling: Displays an error widget when needed.
  • State Management: Uses DropDownNotifier for handling state changes.

Source Code Repository​

Codewave UI Components Repository