Dropdown

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

The Single Select drop-down in Digit UI Components provides a drop-down menu for users to make a single selection. It supports various features such as item filtering and selection handling. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.

Sub-Types

  • Default drop-down

  • Nested drop-down

  • Tree drop-down

Properties

Below are some required parameters:

Name                             Description
textEditingController         controller for managing the text
onChange                      a callback when a new option is selected
items                         A list of DropdownItem representing the options

These are some additional customisation parameters:

suffixIcon                    modify the suffixIcon to open dropdown
dropdownType                   dropdown can be nested dropdown( type is mandatory in
                               nested dropdown item list)
emptyItemText                 Text to display when empty options are sent or no match
                              is found during searching
isSearchable                 flag indicating if the dropdown should support filtering
                             option
selectedOption              the default selected option
isDisabled                 flag indicating where dropdown is disabled(default: false)

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

code(required)                 unique identifier for option
name(required)                 the label or name of dropdown option
description                    additional description for the dropdown option
textIcon                      Icon to be displayed inside the dropdown option
textIcon                      Icon to be displayed inside the dropdown option
type                          in case of nested dropdown type will be sent

TreeNode

Inside the tree node we can pass a list of children associated with a node:

code(required)                 unique identifier for that node
name(required)                 displaying the name or label for the node
children                      a list of the tree node

Configuration

Usages

Default drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(name: 'first',code: '1',),
    DropdownItem(name: 'second',code: '2',),
    DropdownItem(name: 'third',code: '3',),
    DropdownItem(name: 'fourth',code: '4',),
  ],
);

With description and profile image:

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(
      name: 'first',
      code: '1',
      description: 'description for first one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'second',
      code: '2',
      description: 'description for second one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'third',
      code: '3',
      description: 'description for third one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'fourth',
      code: '4',
      description: 'description for fourth one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
  ],
);

Nested drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  dropdownType: DropdownType.nestedSelect,
  items: const [
    DropdownItem(name: 'first',code: '1',type: 'Type A',),
    DropdownItem(name: 'second',code: '2',type: 'Type B'),
    DropdownItem(name: 'third',code: '3',type: 'Type A',),
    DropdownItem(name: 'fourth',code: '4',type: 'Type B'),
  ],
);

Tree drop-down

TreeSelectDropDown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
      TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

Multi Select Drop-down

The Multi-Select drop-down in DIGIT UI components offers a user-friendly interface for selecting multiple options simultaneously. This clean and intuitive component is equipped with built-in chips and provides responsive mouse-down and hover effects.

Sub-Types

  • Default drop-down

  • Nested drop-down

  • Tree drop-down

Properties

Below are some required parameters:

Name                             Description
options                         A list of DropdownItem representing options
onOptionSelected                callback function when an option is selected

These are some additional parameters:

selectionType                   nested Selected(type is required inside DropdownItem)

selectedOptions List of DropdownItem, which will be selected by default

selectedOptions                  List of DropdownItem, which will be selected by 
                                 default
chipConfig                       configuration of appearance of selected option
suffixIcon                      custom suffix icon
focusNode                       a focus node can be passed, to control focus
isDisabled                      whether dropdown is enabled or disabled
clearAllText                    Text for Clear all button in chip selection
valueMapper                      mapper to show selected option inside the chip
controller                      MultiSelectController can be passed

Configuration

Usages

Default Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(code: '1', name: 'first'),
    DropdownItem(code: '2', name: 'second'),
    DropdownItem(code: '3', name: 'third'),
    DropdownItem(code: '4', name: 'four'),
  ],
);

Nested Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(
      code: '1', name: 'first', type: "Type A"),
    DropdownItem(
      code: '2', name: 'second', type: "Type A"),
    DropdownItem(
      code: '3', name: 'third', type: "Type A"),
    DropdownItem(
      code: '4', name: 'four', type: "Type B"),
    DropdownItem(
      code: '5', name: 'five', type: "Type B"),
  ],
  selectionType: SelectionType.nestedMultiSelect,
);

Tree Drop-down

TreeSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
    TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.