Flutter Dropdown: A widget that allows users to select from a number of items

Flutter Dropdown with Single and multiple Select
Flutter Dropdown with Single and multiple Select

Flutter Dropdown Widget

Flutter Dropdown List allows a user to select a particular item from several items which will be in a dropdown fashion. The default value can be an item inside the dropdown or any value the user needs. It has an arrow icon on the list in Flutter or the right upon clicking opens a list of items in which the user can select the desired option. It allows users to select one unique value from a set of values.

So, are you ready to make use of this widget package in the Flutter application? This Flutter widget performs auto search action after user action is performed. If so, then let's quickly jump into the usage and the ways a Dropdown can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this Dropdown List widget in Flutter.

Flutter DropDown Widget

Flutter Dropdown Widget
Flutter Dropdown Widget

GetWidget Dropdown Widget Component is a component that allows users to select a unique value from a set of values which will be displayed upon clicking the arrow/dropdown box. It is useful in selecting a value for any kind of application. It has customization options which is an easy way to handle it as per the application and its requirement. The GetWidget Dropdown displays the list of items in an overlay dropdown fashion.

GetWidget Dropdown components can be classified as Single-select dropdown and Multi-Select Flutter dropdown. Let's dive deep into the two types and see how it is used.

How to Start:

Now, here is the guide about how we should you can start developing Flutter Dropdown Widget with the help of GetWidget UI Library.

First, Let go with Getting started, It will guide you on how to start building a beautiful flutter application UI with the GetWidget UI library. Now, we have to install the GetWidget package from the pub.dev and use our 1000+ inbuilt Widget. To import the package in your Flutter project follow the below guide.

Install Package from pub.dev :

https://pub.dev/packages/getwidget - Check the details about GetWidget Package.

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^2.0.4

Keep playing with the pre-built UI components.

GFSingle-Select Flutter Dropdown

Single-select dropdown button simply selects a unique value from a set of values given in the dropdown. It displays the list of items in an overlay dropdown fashion.

Flutter Dropdown Single Select Widget
Flutter Dropdown Single Select Widget

The below code shows a simple single dropdown code that displays the single value from a list of options.

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: [
        'UI',
        'Devops',
        'API',
        'Apps'
      ]
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),
Flutter Dropdown Single Select Widget code example

The below code shows a customized simple single dropdown code that displays the single value from a list of options.

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: [
        'UI',
        'Devops',
        'API',
        'Apps'
      ]
      // return DropdownMenuItem
      
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),
Flutter Dropdown Single Select Widget Custom example code

GFMulti-Select Dropdown for Flutter App

Muti-select dropdown is used to select multiple values from a given set of checkbox items and display selected items in the TitleTile box. It displays the list of items in an overlay dropdown fashion.

Flutter Dropdown Single Select Widget
Flutter Dropdown Multi Select Widget

The below code shows a simple multi-select dropdown code that displays more than one value from a list of options.

GFMultiSelect(
  items: dropList,
  onSelect: (value) {
    print('selected $value ');
  },
  dropdownTitleTileText: 'UI, API, Apps ',
  dropdownTitleTileMargin: EdgeInsets.only(
      top: 22, left: 18, right: 18, bottom: 5),
  dropdownTitleTilePadding: EdgeInsets.all(10),
  dropdownUnderlineBorder:
  const BorderSide(color: Colors.transparent, width: 2),
  dropdownTitleTileBorder:
  Border.all(color: Colors.grey[300], width: 1),
  dropdownTitleTileBorderRadius: BorderRadius.circular(5),
  expandedIcon: const Icon(
    Icons.keyboard_arrow_down,
    color: Colors.black54,
  ),
  collapsedIcon: const Icon(
    Icons.keyboard_arrow_up,
    color: Colors.black54,
  ),
  submitButton: Text('OK'),
  cancelButton: Text('Cancel'),
  dropdownTitleTileTextStyle:
  const TextStyle(fontSize: 14, color: Colors.black54),
  padding: const EdgeInsets.all(6),
  margin: const EdgeInsets.all(6),
  type: GFCheckboxType.basic,
  activeBgColor: GFColors.SUCCESS,
  activeBorderColor: GFColors.SUCCESS,
  inactiveBorderColor: Colors.grey[300],
),
Flutter Dropdown Multi-Select Widget example code

The below code shows a customized simple multi-select dropdown code that displays more than one value from a list of options.

Container(
  child: GFMultiSelect(
    items: dropList,
    onSelect: (value) {
      print('selected $value ');
    },
    dropdownTitleTileText: 'UI, API, Apps ',
    dropdownTitleTileColor: Colors.grey[200],
    dropdownTitleTileMargin: EdgeInsets.only(
        top: 22, left: 18, right: 18, bottom: 5),
    dropdownTitleTilePadding: EdgeInsets.all(10),
    dropdownUnderlineBorder: const BorderSide(
        color: Colors.transparent, width: 2),
    dropdownTitleTileBorder:
    Border.all(color: Colors.grey[300], width: 1),
    dropdownTitleTileBorderRadius: BorderRadius.circular(5),
    expandedIcon: const Icon(
      Icons.keyboard_arrow_down,
      color: Colors.black54,
    ),
    collapsedIcon: const Icon(
      Icons.keyboard_arrow_up,
      color: Colors.black54,
    ),
    submitButton: Text('OK'),
    dropdownTitleTileTextStyle: const TextStyle(
        fontSize: 14, color: Colors.black54),
    padding: const EdgeInsets.all(6),
    margin: const EdgeInsets.all(6),
    type: GFCheckboxType.basic,
    activeBgColor: Colors.green.withOpacity(0.5),
    inactiveBorderColor: Colors.grey[200],
  ),
),
Flutter Dropdown Multi-Select Widget example custom code

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

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

Called when the user selects an item.

If the [onChanged] callback is null or the list of [DropdownButton.items] is null then the dropdown button will be disabled,

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

On true state it should focus itself if nothing else is already focused.

Defaults to false

focusNodeDefines the keyboard focus for this widget.

The look and feel of the Multiselect Dropdown list widget can be customized using the GFMultiselect properties.

itemsdefines the list of items the user can select
onSelectcallback when user select item from the dropdown, in callback we get list of selected items index
dropdownTitleTileTexttype of [String] to define the dropdownTitleTile title
dropdownTitleTileTextStyletype of [TextStyle] to define the textStyle of [dropDownTitleTileText]
dropdownTitleTileHintTexttype of [String] to define the dropdownTitleTile hint text
dropdownTitleTileHintTextStyletype of [TextStyle] to define the textStyle of [dropDownTitleTileHintTextStyle]
dropdownTitleTileBorderRadiusdefines the border radius of the dropdownTitleTile
dropdownTitleTileBorderdefines the border of the dropdownTitleTile.
dropdownTitleTileColordefines the background color of dropdownButton
hideDropdownUnderlineon true state, it hides the Dropdown Underline border defaults value is false
dropdownUnderlineBorderdefines the border of the Dropdown Underline border
dropdownTitleTileMargindefines the dropdownTitleTile margin
dropdownTitleTilePaddingdefines the dropdownTitleTile padding
expandedIcondefines the dropdownTitleTile's trailing icon when dropdown is visible
collapsedIcondefines the dropdownTitleTile's trailing icon when dropdown is not visible
submitButtondefines the button in the dropdown
colordefines dropdown checkbox ListTile's background color. Can be given [Color] or [GFColors]
avatartype of [Widget] or [GFAvatar] used to defines dropdown checkbox ListTile's leading
margindefines the margin of dropdown checkbox ListTile
paddingdefines the padding of dropdown checkbox ListTile
typedefines dropdown ListTile's checkbox type type of [GFCheckboxType] which is of four type is basic, sqaure, circular and custom
sizedefines dropdown ListTile's checkbox size type of [double] which is GFSize ie, small, medium and large and can use any double value
activeBgColordefines dropdown ListTile's checkbox background color when its active type of [Color] used to change the backgroundColor of the active checkbox
inactiveBgColordefines dropdown ListTile's checkbox background color when its inactive type of [Color] used to change the backgroundColor of the inactive checkbox
activeBorderColor

defines dropdown ListTile's checkbox border color when its active

type of [Color] used to change the border color of the active checkbox

inactiveBorderColor

defines dropdown ListTile's checkbox border color when its inactive

type of [Color] used to change the border color of the inactive checkbox

activeIcon

defines dropdown ListTile's checkbox's active icon

type of [Widget] used to change the checkbox's active icon

inactiveIcon

defines dropdown ListTile's checkbox's inactive icon

type of [Widget] used to change the checkbox's inactive icon

customBgColortype of [Color] used to change the background color of the custom active checkbox only
selectedTo have the list tile appear selected when the checkbox is checked, pass the same value to both. Normally, this property is left to its default value, false.
dropdownBgColordefines the background color of the dropdown. Can be given [Color] or [GFColors]
Getting Started
GetWidget is a Flutter open-source library that comes with pre-build 1000+ UI components. The library is built to make flutter development faster and more enjoyable.

Can we change the arrow button?

Yes, it can be customized according to the need.

Can we customize the checkbox list used in the multi-select dropdown?

Yes, it is fully customized as we are using GFCheckboxListTile and it has many options to customize as per the needs.

Where was Typically Dropdown Button Widget used?

This widget is typically used in the Item search feature.

How to create a Flutter Dropdown

The flutter dropdown Button is a material widget that is used to display the items or list in a dropdown fashion. The user is able to select any one of the items from the list given in the form of the dropdown. The dropdown is used when there are multiple items and saves a lot of space where the lists will be collapsed under the dropdown button.

The dropdown button has an arrow to indicate that the items in the list are not expanded and when the whole button along the arrow is clicked the dropdown list item opens. When the item is selected it will appear on the space provided by the button.

Here to demonstrate the example of the dropdown we will be using the Dropdown of the GetWidget library.

In GetWidget library Dropdown is divided into Single-item dropdown and multi-select dropdown. Let us see one by one in the below sections.

Single-Selection Dropdown option in Flutter

Single-select dropdown selects a unique and only one value from a set of values given in the dropdown. It displays the list of items in an overlay dropdown fashion.

The below code shows a simple single dropdown code that displays the single value from a list of options.

Multi-Select Dropdown in Flutter

Multi-select dropdown is used in selecting more than one item or in other words selecting multiple values from a given set of checkbox items and display selected items in the TitleTile box. It displays the list of items in an overlay dropdown fashion.

The below code shows a simple multi-select dropdown code that displays more than one value from a list of options.

The above examples of both types of dropdowns can be customized according to the need. Head to the official documentation of GetWidget to know more about the components.

How to create a Custom Flutter Dropdown

Dropdown in Flutter is a button that has a list of items upon clicking can be selected and the selected item is displayed on the button. The dropdown is useful where there are many options and the selection has to be made between the given options.

The dropdown button has an arrow in it to show the dropdown list items and upon clicking the arrow or the button, the list of items opens, on which the user can select the required option.

The GetWidget library has a Dropdown Component which we will be using here to demonstrate the example of the dropdown. Dropdown in Getwidget can be classified into Single and Multi-level dropdowns.

let us go one by one in the below sections.

GFSingle-Select Flutter Dropdown:

Single-select dropdown selects a unique value from a set of values given in the dropdown. It displays the list of items in an overlay dropdown fashion.

The below code shows a simple single dropdown button code that displays the single value from a list of options.

String dropdown;

Container(
  height: 50,
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.all(10),
  child: DropdownButtonHideUnderline(
    child: GFDropdown(
      padding: const EdgeInsets.all(5),
      borderRadius: BorderRadius.circular(15),
      border: const BorderSide(
          color: Colors.black12, width: 1),
      dropdownButtonColor: Colors.white,
      value: dropdownValue,
      onChanged: (newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: [
        'UI',
        'Devops',
        'API',
        'Apps'
      ]
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),
Flutter Dropdown Single option selection example with GFDropdown

The below code shows a customized simple single dropdown code that displays the single value from a list of options.

String dropdown;

Container(
  height: 50,
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.all(5),
  child: DropdownButtonHideUnderline(
    child: GFDropdown(
      padding: const EdgeInsets.all(5),
      borderRadius: BorderRadius.circular(15),
      border: const BorderSide(
          color: Colors.black12, width: 1),
      dropdownButtonColor: Colors.grey[300],
      value: dropdownValue,
      onChanged: (newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: [
        'UI',
        'Devops',
        'API',
        'Apps'
      ]
      // return DropdownMenuItem
      
          .map((value) => DropdownMenuItem(
        value: value,
        child: Text(value),
      ))
          .toList(),
    ),
  ),
),
Flutter Dropdown Single Custom option selection example with GFDropdown

GFMulti-Select Flutter Dropdown

Muti-select dropdown is used to select multiple values from a given set of checkbox items and display selected items in the TitleTile box. It displays the list of items in an overlay dropdown fashion.

The below code shows a simple multi-select dropdown code that displays more than one value from a list of options.

GFMultiSelect(
  items: dropList,
  onSelect: (value) {
    print('selected $value ');
  },
  dropdownTitleTileText: 'UI, API, Apps ',
  dropdownTitleTileMargin: EdgeInsets.only(
      top: 22, left: 18, right: 18, bottom: 5),
  dropdownTitleTilePadding: EdgeInsets.all(10),
  dropdownUnderlineBorder:
  const BorderSide(color: Colors.transparent, width: 2),
  dropdownTitleTileBorder:
  Border.all(color: Colors.grey[300], width: 1),
  dropdownTitleTileBorderRadius: BorderRadius.circular(5),
  expandedIcon: const Icon(
    Icons.keyboard_arrow_down,
    color: Colors.black54,
  ),
  collapsedIcon: const Icon(
    Icons.keyboard_arrow_up,
    color: Colors.black54,
  ),
  submitButton: Text('Submit'),
  cancelButton: Text('Cancel'),
  dropdownTitleTileTextStyle:
  const TextStyle(fontSize: 14, color: Colors.black54),
  padding: const EdgeInsets.all(6),
  margin: const EdgeInsets.all(6),
  type: GFCheckboxType.basic,
  activeBgColor: GFColors.DANGER,
  activeBorderColor: GFColors.DANGER,
  inactiveBorderColor: Colors.grey[400],
),
Flutter Dropdown Multi-Select Custom option example with GFDropdown

The below code shows a customized simple multi-select dropdown code that displays more than one value from a list of options.

Container(
  child: GFMultiSelect(
    items: dropList,
    onSelect: (value) {
      print('selected $value ');
    },
    dropdownTitleTileText: 'UI, API, Apps ',
    dropdownTitleTileColor: Colors.grey[200],
    dropdownTitleTileMargin: EdgeInsets.only(
        top: 22, left: 18, right: 18, bottom: 5),
    dropdownTitleTilePadding: EdgeInsets.all(10),
    dropdownUnderlineBorder: const BorderSide(
        color: Colors.transparent, width: 2),
    dropdownTitleTileBorder:
    Border.all(color: Colors.grey[300], width: 1),
    dropdownTitleTileBorderRadius: BorderRadius.circular(5),
    expandedIcon: const Icon(
      Icons.keyboard_arrow_down,
      color: Colors.black54,
    ),
    collapsedIcon: const Icon(
      Icons.keyboard_arrow_up,
      color: Colors.black54,
    ),
    submitButton: Text('OK'),
    dropdownTitleTileTextStyle: const TextStyle(
        fontSize: 14, color: Colors.black54),
    padding: const EdgeInsets.all(6),
    margin: const EdgeInsets.all(6),
    type: GFCheckboxType.basic,
    activeBgColor: Colors.green.withOpacity(0.5),
    inactiveBorderColor: Colors.grey[200],
  ),
),
Flutter Dropdown Multi-Select Custom option example with GFDropdown

The above examples of dropdowns can be customized according to the need of the user and the application. Head to the official documentation of GetWidget to know more about the components.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum: if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository: Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

Conclusion:

Here we discussed, what Flutter Dropdown Widget is? And how it is easy and powerful to use in any application through the GetWidget Dropdown component for Flutter apps. Here, there are options to customize and use other types of dropdowns.