DropDownButton Widget – Flutter Guide By Flutter Agency

· 5 min read
DropdownButton Widget - Flutter Guide By Flutter Agency
DropdownButton Widget - Flutter Guide By Flutter Agency

What is DropDownButton Widget?

If user have and input field and want the users to select only from certain values, one of the most common input types is dropdown. In Fluter, it can be done easily using a DropDownButton Widget.

The constructor of the DropDownButton Widget will look like below :

  DropDownButton({
    Key key,
    @required List<DropdownMenuItem<T>> items,
    DropdownButtonBuilder selectedItemBuilder,
    T value,
    Widget hint,
    Widget disabledHint,
    @required ValueChanged<T> onChanged,
    VoidCallback onTap,
    int elevation: 8,
    TextStyle style,
    Widget underline,
    Widget icon,
    Color iconDisabledColor,
    Color iconEnabledColor,
    double iconSize: 24.0,
    bool isDense: false,
    bool isExpanded: false,
    double itemHeight: kMinInteractiveDimension,
    Color focusColor,
    FocusNode focusNode,
    bool autofocus: false,
    Color dropdownColor,
  });

To use the widget, there are two required properties: items and onChanged. items are of type List>, where T is the value type. It can be a number, a String, or any other type. For each DropdownMenuItem, you need to define value and child. The value must be of type T which means it must be the same across all options. For example, if you construct with DropdownButton, the value of all options must be String. child widget is the widget that will be rendered for that option item. onChanged is a function with one parameter.

Every time the value changes, it will be called with the new value as the argument. Inside onChanged, usually, we update the state that stores the dropdown value.

Code Snippet will look like below :

DropdownButton<String>(
          items: [
		  Item1,
		  Item2,
		  Item3,
		  Item4	  
          ],
          onChanged: (String value) {
            setState(() {
              _value = value;
            });
          },
          hint: Text('Select Item'),
          value: _value,
        ),

There are two non-required options that you’ll most likely use. First values, which stores the current value. If the value matches a DropDownMenuItem’s value, the option item will be displayed as a selected item. It can be used to set the initial value as well. The other option is a hint, which is a widget that will be shown if no value selected.

Example :

 String _value;
Center(
      child: DropdownButton<String>(
        items: [
          DropdownMenuItem<String>(
            child: Text('Item 1'),
            value: 'one',
          ),
          DropdownMenuItem<String>(
            child: Text('Item 2'),
            value: 'two',
          ),
          DropdownMenuItem<String>(
            child: Text('Item 3'),
            value: 'three',
          ),
        ],
        onChanged: (String value) {
          setState(() {
            _value = value;
          });
        },
        hint: Text('Select Item'),
        value: _value,
      ),
    );

Above code will give us output like below :

DropDown widget

DropDownButton Widget

Properties :

key: The widget’s key

List<DropdownMenuItem<T>> : The options.

T value: The current value.

Widget hint: Widget that will be displayed if a value is null.

disableHint: Widget that will be displayed in the dropdown is disabled.

onChanged: Function that will be executed every time the value changes.

elevation: Z-coordinate of the options.

style: Text style inside the dropdown.

underline: Widget that will be used for drawing the drop-down button’s underline. Default is 0.0 width bottom border with color 0xFFBDBDBD.

icon: The dropdown’s icon. Default is Icons.arrow_drop_down

iconDisabledColor: Icon color when it’s disabled. If the thems’ ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it’s Brightness. dark, default is Colors.white70.

iconEnabledColor: Icon color when it’s enabled. If the thems’ ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it’s Brightness. dark, default is Colors.white70.

iconSize: The icon size. The default is 24.0.

isDense: Whether to reduce the button’s height. The default is false.

isExpanded: Whether to set the dropdown’s inner contents to horizontally fill its parent. The default is false.

Thanks for reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply