GF Flutter Dropdown

Banner image

GFDropdown is a Dropdown in Flutter Widget that lets users select from the number of items and display the selected item. It displays a list of items in the overlay dropdown fashion. It has an arrow button to show the dropdown list.

GF Flutter Dropdown List Usage

The simple example code of a basic GFDropdown is as shown below.

GF Flutter Dropdown Widgets

String dropdown;

Container(
  height: 50,
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.all(20),
  child: DropdownButtonHideUnderline(
    child: GFDropdown(
      padding: const EdgeInsets.all(15),
      borderRadius: BorderRadius.circular(5),
      border: const BorderSide(
          color: Colors.black12, width: 1),
      dropdownButtonColor: Colors.white,
      value: dropdownValue,
      onChanged: (newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: [
        'FC Barcelona',
        'Real Madrid',
        'Villareal',
        'Manchester City'
      ]
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),

GF Custom Flutter Dropdown Menu

GFDropdown features allow users to create a customized dropdown for the more flexible and interactive UI design.

Custom Flutter Dropdown Widgets

Flutter Custom Dropdown Menu List Example Source code

String dropdown;

Container(
  height: 50,
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.all(20),
  child: DropdownButtonHideUnderline(
    child: GFDropdown(
      padding: const EdgeInsets.all(15),
      borderRadius: BorderRadius.circular(10),
      border: const BorderSide(
          color: Colors.black12, width: 1),
      dropdownButtonColor: Colors.grey[300],
      value: dropdownValue,
      onChanged: (newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: [
        'FC Barcelona',
        'Real Madrid',
        'Villareal',
        'Manchester City'
      ]
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),

GF Flutter Dropdown Menu Custom Properties

The look and feel of the GFDropdown can be customized using the GFDropdown properties.

NameDescription
iconThe widget to use for the drop-down button's icon. Defaults to an [Icon] with the [Icons.arrow_drop_down] glyph.
elevationThe z-coordinate at which to place the menu when open.
valueThe value of the currently selected [DropdownMenuItem].
borderDefines the border of dropdown button
paddingDefines the padding given inside the dropdown
hintA placeholder widget that is displayed by the dropdown button.
disabledHintA message to show when the dropdown is disabled.
onChanged<p>Called when the user selects an item.</p><p>If the [onChanged] callback is null or the list of [DropdownButton.items] is null then the dropdown button will be disabled,</p>
onTapCalled when the dropdown button is tapped.
styleDefaults to the [TextTheme.subtitle1] value of the current [ThemeData.textTheme] of the current [Theme].
underlineThe widget to use for drawing the drop-down button's underline.
iconDisabledColorThe color of any [Icon] descendant of [icon] if this button is disabled, i.e. if [onChanged] is null.
iconEnabledColorThe color of any [Icon] descendant of [icon] if this button is enabled, i.e. if [onChanged] is defined.
iconSizeThe size to use for the drop-down button's down arrow icon button.
isDenseReduce the button's height.
isExpandedSet the dropdown's inner contents to horizontally fill its parent.
itemHeightdefines the height of the menu items
focusColorThe color for the button's [Material] when it has the input focus.
dropdownColorDefines the background color of the dropdown.
borderRadiusDefines the border radius of the dropdown.
dropdownButtonColorDefines the background color of the dropdownButton.
autofocus<p>On true state it should focus itself if nothing else is already focused.</p><p>Defaults to false</p>
focusNodeDefines the keyboard focus for this widget.

Last Updated: February 4, 2022