how to use dropdownbutton with same value?

Question

There are few same values in the dropdown button , when i tap on that it show the error ,is there any way to use the use the dropdown with same values .I have tried using the value :

DropdownButtonHideUnderline(
                    child: DropdownButton2(
                      iconEnabledColor: primaryColor,
                      selectedItemHighlightColor: primaryColor,
                      hint: Text(
                        'User type',
                        style: TextStyle(
                          fontSize: 14,
                          color: Theme.of(context).hintColor,
                        ),
                      ),
                      items: _user_type
                          .map((item) => DropdownMenuItem<String>(
                                value: item,
                                child: Text(
                                  item,
                                  style: const TextStyle(
                                    fontSize: 14,
                                  ),
                                ),
                              ))
                          .toList(),
                      value: selectedValue,
                      onChanged: (value) {
                        setState(() {
                          selectedValue = value as String;
                        });
                      },
                      buttonHeight: 40,
                      // buttonWidth: doubl,
                      itemHeight: 40,
                    ),

still getting the error

providing it dropdown items list like this ['one','two','two','three'] but it is showing error — appdev, May 12 '22 at 10:01
Can you tell me display dropdown data into dropdown button? as I saw your `DropdownButtonFormField2` Widget and [package](https://pub.dev/packages/dropdown_button2) — Ravindra S. Patil, May 12 '22 at 10:03

score 1 · Accepted Answer · edited May 13 '22 at 01:11

Value of every DropdownMenuItem should be unique. In order to make use of list which have repetitive values, you should have a unique identifier for each.

You can create a model:

class Model {
  int id;
  String value;
  Model(this.id, this.value);
}

You can create list with repetitive values:

 List<Model> list = [
    Model(0, "a"),
    Model(1, "a"),
    Model(2, "b"),
    Model(3, "b"),
    Model(4, "c"),
    Model(5, "c"),
  ];

…and you can use the list like this in your DropdownButton:

DropdownButton(
  value: _selectedValue,
  items: list
     .map((value) => DropdownMenuItem(
      value: value.id, child: Text(value.value)))
      .toList(),
  onChanged: (value) {
      _selectedValue = value as int;
       setState(() {});
          },
      )

score 0 · Answer 2 · answered May 12 '22 at 11:03

Why don't you try adding a .toSet() before the .map(). The .toSet() should filter your list to unique values.

 DropdownButtonHideUnderline(
                    child: DropdownButton2(
                      iconEnabledColor: primaryColor,
                      selectedItemHighlightColor: primaryColor,
                      hint: Text(
                        'User type',
                        style: TextStyle(
                          fontSize: 14,
                          color: Theme.of(context).hintColor,
                        ),
                      ),
                      items: _user_type
                          .toSet()
                          .map((item) => DropdownMenuItem<String>(
                                value: item,
                                child: Text(
                                  item,
                                  style: const TextStyle(
                                    fontSize: 14,
                                  ),
                                ),
                              ))
                          .toList(),
                      value: selectedValue,
                      onChanged: (value) {
                        setState(() {
                          selectedValue = value as String;
                        });
                      },
                      buttonHeight: 40,
                      // buttonWidth: doubl,
                      itemHeight: 40,
                    ),

score 0 · Answer 3 · answered May 12 '22 at 11:05

Try below code, I have used dropdown_button2 package

Declare your variables and dropdown data

 String selectedValue;
  List<String> items = [
    'User 1',
    'User 2',
    'User 3',
    'User 4',
    'User 5',
    'User 6',
  ];

Your Widget:

DropdownButtonHideUnderline(
          child: DropdownButton2(
            isExpanded: true,
            hint: Text(
              'User type',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
            items: items
                .map((item) => DropdownMenuItem<String>(
                      value: item,
                      child: Text(
                        item,
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ))
                .toList(),
            value: selectedValue,
            onChanged: (value) {
              setState(() {
                selectedValue = value as String;
              });
            },
            buttonHeight: 50,
            buttonWidth: 160,
            buttonPadding:  EdgeInsets.all(8),
            buttonDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(14),
              border: Border.all(
                color: Colors.black26,
              ),
            ),
            itemHeight: 40,
          ),
        ),

Your Dropdown button result->

Your Dropdown data result->

You can refer my answer here, here, here also for same using dropdown_below package

how to use dropdownbutton with same value?

3 Answers3