Flutter: There should be exactly one item with [DropdownButton]'s value

Question

I am trying to create a dropdown button in Flutter. I am getting a List from my database then I pass the list to my dropdownButton everything works the data is shown as intended but when I choose an element from it I get this error:

There should be exactly one item with [DropdownButton]'s value: Instance of 'Tag'. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 805 pos 15: 'items == null || items.isEmpty || value == null ||
          items.where((DropdownMenuItem<T> item) {
            return item.value == value;
          }).length == 1'

I tried setting DropdownButton value to null it works but then I can't see the chosen element.

Here is my code:

FutureBuilder<List<Tag>>(
    future: _tagDatabaseHelper.getTagList(),
    builder: (BuildContext context, AsyncSnapshot<List<Tag>> snapshot) {
      if (!snapshot.hasData) {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
      return ListView(
        children: <Widget>[
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.2,
          ),
          Container(
            margin: EdgeInsets.symmetric(
                horizontal: MediaQuery.of(context).size.width * 0.07),
            child: Theme(
              data: ThemeData(canvasColor: Color(0xFF525A71)),
              child: DropdownButton<Tag>(
                value: _selectedTag,
                isExpanded: true,
                icon: Icon(
                  Icons.arrow_drop_down,
                  size: 24,
                ),
                hint: Text(
                  "Select tags",
                  style: TextStyle(color: Color(0xFF9F9F9F)),
                ),
                onChanged: (value) {
                  setState(() {
                    _selectedTag = value;
                  });
                },
                items: snapshot.data.map((Tag tag) {
                  return DropdownMenuItem<Tag>(
                    value: tag,
                    child: Text(
                      tag.tagTitle,
                      style: TextStyle(color: Colors.white),
                    ),
                  );
                }).toList(),
                value: _selectedTag,
              ),
            ),
          ),

I used futureBuilder to get my List from database.

Saxe

Have you tried hardcoding a value there? String value = "some val"; before your FutureBuilder and assigning that to _value = value; – Affixation

@Affixation Yes same problem. – Saxe

Just to add to what others have already mentioned, not only does the default value need to match ONE of the values in your list, if it is a String, the case must also match. If you have NIGERIA in your list, and that's the default value, the default must also be NIGERIA, not Nigeria. – Efflorescent

Answer 1

Well, since no problem has an exact same solution. I was facing the same issue with my code. Here is How I fixed this.

CODE of my DropdownButton:

DropdownButton(
   items: _salutations
         .map((String item) =>
             DropdownMenuItem<String>(child: Text(item), value: item))
         .toList(),
    onChanged: (String value) {
       setState(() {
         print("previous ${this._salutation}");
         print("selected $value");
         this._salutation = value;
            });
          },
     value: _salutation,
),

The Error

In the code snippet below, I am setting the state for a selection value, which is of type String. Now problem with my code was the default initialization of this selection value. Initially, I was initializing the variable _salutation as:

String _salutation = ""; //Notice the empty String.

This was a mistake!

Initial selection should not be null or empty as the error message correctly mentioned.

'items == null || items.isEmpty || value == null ||

And hence the crash:

Solution
Initialize the value object with some default value. Please note that the value should be the one of the values contained by your collection. If it is not, then expect a crash.

  String _salutation = "Mr."; //This is the selection value. It is also present in my array.
  final _salutations = ["Mr.", "Mrs.", "Master", "Mistress"];//This is the array for dropdown

Zurek

Do note default selection value should be present in the array. – Signorelli

This solved my problem as of Sep 2021 – Leiker

it can't work if data was dynamic from server. how could you tell me how it's work if you have data dynamic? – Hypergolic

@MichaelFernando I think in that is a valid question. Did you try initialising the UI only once the data from server has loaded? Because then, you will have either an empty initialiser or the first item in the list. – Zurek

finally, it's has works. because my func dropdown i set inside widget build. so that, it makes always load data in first time. so, i change position this function at outside of widget build and works normally. thank you for explain me about it @Zurek – Hypergolic

But what if I want the drop down value to be empty first, therefore forcing the user to select a choice? I don't want a default selected value – Nowhere

@Nowhere to resolve this there could be 2 solutions. You can use the solution shared by Nuts below, Or to set a default selection, wait for API response, get the list, add default value at index ZERO and then initialise the UI with that data. Not a clean one but will serve you purpose. – Zurek

My code was missing the setState, now it's working. Thanks. – Urethroscope

@Zurek Hi I'm facing the same issue, so in my array for dropdown, there's a duplicate value like ['Mr.','Mr'], so if i choose one ot those i got error like you. and i didn't want to set initialValue or fill the selection value. do you have another solution?. tq – Suctorial

@Suctorial I think as a literal string comparison Mr. != Mr not sure how that is happening. But again, maybe introduce the "Select Salutation" as an initial item in the list and in the dropdown too, but that's probably upto your usecase. – Zurek

Also if you're using a custom class then we've to override == operator and hashcode in order to work correctly or use a package like Equatable – Quyenr

When i removed the value of DropdownButton it worked – Manipulator

Answer 2

Might also get this error if trying to set value of dropdown with a class instance;

  var tag1 = Tag();
  var tag2 = Tag();
  print(tag1 == tag2); // prints false, dropwdown computes that value is not present among dropdown options

To solve this override operator ==:

class Tag{
 String name = "tag";

  @override
  bool operator ==(Object other) => other is Tag && other.name == name;

  @override
  int get hashCode => name.hashCode;
}

or use https://pub.dev/packages/equatable lib

class Tag extends Equatable{
 String name = "tag";

  @override
  List<Object> get props => [name];
}

Shulman

The exact answer I was looking for. Thanks man. – Hilversum

Thank you so much, this is what I was looking for. – Pointed

Thanks man, this did the trick for me – Blackstock

Top answer. This should be the only solution when using model class in dropdown – Belldas

Answer 3

I had the same problem. The solution is simple: you have to be sure that the String that is your default dropdownvalue is contained in the list that you want to use in your dropdownmenu. If you wanted to, let’s say, use a list from an api, you should be sure to know at least one value of that list, so that you could assign it to the variable that is your default dropdownvalue.

Here I want display a list that I obtain from an api. In order to not obtain the error, I set my defaultdropdownvalue with the name ‘Encajes’ that is one of the existing categories that my list contains.

String dropdownValue = "Encajes";

---

    items: categoriesString
    .map<DropdownMenuItem<String>>((String value) {
  return DropdownMenuItem<String>(
    value: value,
    child: Text(value),
  );
}).toList(),

Leggy

defalut value not worked it still gives error. – Concupiscence

"Failed assertion: line 1411 pos 15: 'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) { return item.value == value; }).length == 1'" geeting same error which getting while changeing dropdown item. – Concupiscence

Your list is empty, so that means that, even if you're setting the first item correctly, somehow your widget seems to try to be rendered before your list has any values. I would try to initialize my list like List myList = []. In that way you make sure your app doesn't crash before it gets the members. I haven't seen your code, just trying to guess. – Leggy

Let us continue this discussion in chat. – Concupiscence

Answer 4

Some of the answers on this thread will definitely help you resolve the issue. But if your DropdownButton is dealing with custom Objects (Tag class in this case) is important to clarify why this issue occurs in the first place and what the DropdownButton expects from you. Once you understand this you will never get this error again.

To give you a little background on the issue it is important to understand how two instances of dart objects are compared.

You will very likely not see the above error if your DropdownButton is dealing with a List of int, String, bool, etc.

This is because you can directly compare primitive types and you would get the expected result.

for instance

int x = 5;
int z = 10;
int y = 5;
String foo= 'hello';
String bar = 'hello; 

x == z; // false
x == y; // true
foo == bar; // true

But when dealing with Custom Objects you have to be extra careful and you must ensure you override the "==" operator so that dart knows how to compare instances of your custom object. By default, two objects are equal if they are of the same instance.

consider the Tag class,

class Tag{
final String name;
final String code;

Tag({this.name,this.code});
}

final tag1 = Tag(name:'foo', code: 'hello');
final tag2 = Tag(name:'foo', code: 'hello');
Tag tag3 = tag1;

when you compare tag3==tag1 dart would return true as expected, But when you compare tag1 == tag2, the dart would return false, since both objects are not of the same instance.

So to deal with this issue you need to override the == operator as and modify your Tag class as shown below

class Tag{
final String name;
final String code;

Tag({this.name,this.code});

@override
  bool operator ==(Object other){
      return identical(this, other) ||
        (other.runtimeType == runtimeType &&
        other is Tag &&
        other.name == name &&
        other.code == code
   }
}

Now when you compare tag1 ==tag2 it would return true.

This is documented in the official docs here https://dart.dev/guides/language/effective-dart/design#equality

Coming to the DropdownButton error it expects

1. items is not null
2. items is not empty
3. value is not null
4. value must be present only once in items

Point 4 would fail if you are using Custom objects without overriding the == operator and hence you would get the above error.

TLDR;

So to deal with the error, ensure the above 4 points satisfy and override the == operator so that dart can compare instances of your Tag class as you would expect.

Toritorie

Answer 5

Code of my dropdown

child: DropdownButton(
      items: _currencies.map((String value) {
        return DropdownMenuItem<String>(
          child: Text(value),
          value: value,
        );
      }).toList(),
      value: 'Rupees',
      onChanged: (String newValueSelected) {
        // Your code to execute, when a menu item is selected from 
        dropdown
      },
))
var _currencies = ['Rupee','Dollar','Pound'];

I faced same error because the value in the dropdown code block is not matching with any of the fields in _currencies

Encourage

Answer 6

The exact answer is: keep "value" null before user selection:

String selectedValue = '';

And in the DropdownButton2 Widget:

...
value: selectedValue.isEmpty ? null : selectedValue,
...

It says if selectedValue is empty then give null but when user select a value then give selectedValue

Hudibrastic

This actually works, for me the items are from the server, have to check and set null condition. here! Damn flutter documents! – Menstruum

Answer 7

just make the tag class extend from Equatable and pass the attributes to the props.. this did the trick for me.

class Tag extends Equatable{
  String id;
  String name;

  Tag(this.id, this.name);

  @override
  List<Object> get props => [id,name];

}

Arwood

Answer 8

I have had the same issue and surprisingly, there were duplicates in my list of items which were being fetched from a remote DB.

Each time I fetched the data from the server (when a new app user logged in), the data had no duplicates but the same data was being added to the list multiple times because I was logging in multiple users on the same device. Maybe your bug is something similar.

So, make sure you remove any duplicates in the snapshot.data before setting them as items of the DropDownButton.

Anderton

The same happened to me. Remove duplicates fixed the issue. – Moment

Answer 9

i had the same Error and my default value was not present in the listItems was mapping in the Dropdown Button as :

String defaultvalue = 'selectCategorie'

const List<String> Subcategories = ['category 1','category 2','category 3'...];

Had to Change to this :-

String defaultvalue = 'selectCategorie';

const List<String> Subcategories = ['selectCategorie','category 1','category 2','category 3'...];

now when you pass the defaultvalue in the DropdownButton no errors

DropdownButton (
  item:[]
 onChanged: (String values){
   print(values);
setState(() {
defaultValue = values;
});
},
value: defaultValue,
)

Litchi

Answer 10

Note that if the list has duplicated values, it will also has this error. For example, if languages = ["English", "English", "French"];

then if I set the default language = "English".

      DropdownButton<String>(
        value: language,
        icon: const Icon(Icons.arrow_downward),
        iconSize: 24,
        elevation: 16,
        style: const TextStyle(color: AppColors.highLightTextColor),
        underline: Container(
          height: 1,
          color: AppColors.underLineColor,
        ),
        onChanged: (String? newValue) async {
          setState(() {
            language = newValue;
          });
        },
        items: languages.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),

Remove the duplicate values, then it works.

Moment

Answer 11

So I found a solution.

I created empty List to hold my Tag objects.

List<Tag> _tagList = [];

Then, in my initState i assigned the list i get from database to the previous List

     @override
    void initState() {
    super.initState();
    _tagDatabaseHelper.getTagList().then((foo) {
      setState(() {
        _tagList = foo;
      });
    });
  }

Finally My DropdownButton code :

DropdownButton<Tag>(
            isExpanded: true,
            icon: Icon(
              Icons.arrow_drop_down,
              size: 24,
            ),
            hint: Text(
              "Select tags",
              style: TextStyle(color: Color(0xFF9F9F9F)),
            ),
            items: _tagList.map((foo) {
              return DropdownMenuItem(
                value: foo,
                child: Text(foo.tagTitle),
              );
            }).toList(),
            onChanged: (value) {
              setState(() {
                _selectedTag = value;
              });
            },
            value: _selectedTag,
          ),

Saxe

I don't see any issue with the code for DropdownButton here and I am doing the same. But doesn't seem to work for me. Just crashes with the same error! If I remove the value:_assignedString then this works fine, but then DropdownButton doesn't display the selected value ofcourse. Still looking for a solution. – Zurek

I solved my issue. @Abdelbaki's issue as well is because of the same reason but since you were fetching async data, it may be a cause but actually it was the value attribute getting a null or and empty value. – Zurek

Answer 12

I used a trick. The selected item make as first index item in the list .So when changing item at every time remove the item from list and reinsert the item as first item in the list . Please refer the below code. Here iam using Object as the drop down item and the widget i make it as extracted function. and also before calling the dropDownButton function make

//items list like below

 List<LeaveType> items = [
 (id=1,name="Sick"),
 (id=2,name="Paid")
 ]

selectedLeave = null;

Row leaveTypeDropDown(StateSetter setCustomState, List<LeaveType> items) {
    if(selectedLeave != null){
      items.remove(selectedLeave);
      items.insert(0, selectedLeave);
    }
    return Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children : [
              text("Select Leave Type",textSize: 15),
              Padding(padding: const EdgeInsets.all(5)),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black,width: 1),
                    borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                  ),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton<LeaveType>(
                      isExpanded: true,
                      //initial value 
                      value: selectedLeave != null ? items[0] : null,
                      icon: const Icon(Icons.arrow_downward),
                      iconSize: 24,
                      elevation: 16,
                      hint: text("Leave Type"),
                      style: const TextStyle(
                          color: Colors.black
                      ),
                      onChanged: (LeaveType  value) {
                        setCustomState(() {
                          selectedLeave = value;
                          items.remove(selectedLeave);
                          items.insert(0, selectedLeave);
                        });
                      },
                      items: items
                          .map((leave) {
                        return  new DropdownMenuItem<LeaveType>(
                          value: leave,
                          child: text(leave.name),
                        );
                      }).toList(),
                    ),
                  ),
                ),
              ),
            ]
        );
  }

Barbee

Answer 13

I changed as below and it got solved:

Initial Code:

List<GamesModel> users = <GamesModel>[
  new GamesModel(1,"Option1"),
  new GamesModel(2,"Option2"),

];
return users;

Changed Code:

List<GamesModel> users = <GamesModel>[
      const GamesModel(1,"Option1"),
      const GamesModel(2,"Option2"),
];
return users;

If anybody want i can put the whole code

Pat

you just changes the new to const? – Prescript

Answer 14

In my case, i use empty String for default

value : dropdownValue != "" ? dropdownValue : null

Like this, errors be gone

Reserved

Answer 15

you can avoid the null value using a ternary operator:

  Container(
             child:
              new DropdownButton<String>(
              value: dropdownValue ?? "1",
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: const TextStyle(color: Colors.black, fontSize: 18),
              underline: Container(height: 2, color: Colors.white24, ),
              items: <String>['1', '2', '3', '5'].map((String value) {
              return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
              );}).toList(),
              onChanged: (value) {
                  setState(() { dropdownValue=value;});
              },
          )),

Raver

Answer 16

          DropdownButton<String>(
            iconEnabledColor: Colors.cyan.withOpacity(.6),
            isExpanded: true,
            itemHeight: 50,
            iconSize: 30,
            hint: Text("Choose Province"),
            items: _provinces
                .map((e) => DropdownMenuItem(
              child: Text(e),
              value: e,
            ))
                .toList(),
            value: _Province,
            onChanged: (String? value) async{
              final respnose=await FirebaseFirestore.instance.collection('city').where('provinceName',isEqualTo: value).get();
              _city=[];
              for(var item in respnose.docs){
                print(item.data());
                _city.add(item.data()['name']);
              }
              
              print(_Province);
              setState(() {
                _city=_city;
                _Province = value;
              });
            },
          ),
          SizedBox(height: 20,),

          DropdownButton<String>(
            iconEnabledColor: Colors.cyan.withOpacity(.6),
            isExpanded: true,
            itemHeight: 50,
            iconSize: 30,
            hint: Text("Choose City"),
            items:_city
                .map((e) => DropdownMenuItem(
              child: Text(e),
              value: e,
            ))
                .toList(),
            value: _City,
            onChanged: (String? value) async{
              setState(() {
                _town=[];
                _Town=null;
              });
              print(_town);
              final respnose=await FirebaseFirestore.instance.collection('town').where('cityName',isEqualTo: value).get();
              print(respnose.docs);


              for(var item in respnose.docs){
                print(item.data());
                _town.add(item.data()['name']);
              }
              print(_town);
              print(_City);
              setState(() {

                _City = value;
                _town=_town;
              });
            },
          ),
          SizedBox(height: 20,),
          
          if(true)
          DropdownButton<String>(
            iconEnabledColor: Colors.cyan.withOpacity(.6),
            isExpanded: true,
            itemHeight: 50,
            iconSize: 30,
            hint: Text("Choose Town"),
            items:_town
                .map((e) => DropdownMenuItem(
              child: Text(e),
              value: e,
            )
            )
                .toList(),
            value: _Town,
            onChanged: (String? value)async {
              print(_Town);
              setState(() {
                _Town = value;
              });

         

Verruca

Please provide some explanation and format your code. See How do I write a good answer? – Illuse

Answer 17

This error also occurs if you forget to give dropdown menu items a value. ==== WORKS ====

<String>['A', 'B', 'C'].map<DropdownMenuItem<String>>((vehicle) {
        print("vehicle is $vehicle");
        print("vehicle is equal ${vehicle == x.value}");
        return DropdownMenuItem<String>(
          value: vehicle,
          child: Text(
            // vehicle.vehicleInfo!.vehicleType!,
            vehicle,
            style: TextStyle(
              color: Colors.grey[600],
            ),
          ),
        );
      }).toList(),

==== DOESNT WORK ====

<String>['A', 'B', 'C'].map<DropdownMenuItem<String>>((vehicle) {
        return DropdownMenuItem<String>(
          child: Text(
            vehicle,
            style: TextStyle(
              color: Colors.grey[600],
            ),
          ),
        );
      }).toList(),

Manuel

Answer 18

I had the same problem, and the solution is to fill the value of DropdownButton(value: (use a value from the items you set) you can not use any value you want, but it should be one of the items that you set for the DropdownMenuItem.

Sandarac

There are thirteen existing answers to this question, including an accepted answer with 58 upvotes. Are you sure your answer hasn't already been provided? If not, why might someone prefer your approach over the existing approaches proposed? Are you taking advantage of new capabilities? Are there scenarios where your approach is better suited? Also, did you mean "you can use any value you want"? Otherwise, the statement doesn't make sense. – Illbred

Answer 19

I think because of the update in the framework, the error came out

Here is how you can solve it

DropdownButton(
              hint: const Text("Please choose your gender"),
              items: <String>["Male", "Female", "Rather not say"]
                  .map<DropdownMenuItem<String>>((e) {
                return DropdownMenuItem<String>(
                    value: e, child: Text(e.toString()));
              }).toList(),
              onChanged: (String? value) {
                setState(() {
                  dropdownValue = value!;
                });
              });

Note that: dropdownValue is a string variable defined at the top

Evered

Answer 20

If you are loading the list from an api that returns list, look at what i did to debug the error.

1. Created a reusable widget that handle future response

    Widget rangeLists(selectedValue) {
    return FutureBuilder(
        future: YourFuture,//this should return Future<List>
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Text('Loading...');
          } else {
            List<DropdownMenuItem<String>> categoriesItems = [
              DropdownMenuItem(
                child: Text(selectedValue),
                value: selectedValue,
              ),
            ];
            print('categoriesItems.last.value');
            print(categoriesItems.last.value);
            var snapshotAsMap = snapshot.data as List;
            for (int i = 0; i < snapshotAsMap.length; i++) {
              if (snapshotAsMap[i]['category'] != selectedValue) {
                categoriesItems.add(
                  DropdownMenuItem(
                    child: Text(snapshotAsMap[i]['category']),
                    value: snapshotAsMap[i]['category'],
                  ),
                );
              }
            }
            return Padding(
              padding: const EdgeInsets.only(left: 18.0, right: 18, top: 10),
              child: Container(
                padding: EdgeInsets.only(left: 25, right: 25),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey, width: 1),
                    borderRadius: BorderRadius.circular(25)),
                child: DropdownButton<String>(
                  items: categoriesItems,
                  icon: const Icon(
                    Icons.expand_more,
                    color: Colors.grey,
                  ),
                  iconSize: 24,
                  elevation: 16,
                  isExpanded: true,
                  style: const TextStyle(color: Colors.grey),
                  underline: SizedBox(),
                  onChanged: (value) {
                    setState(() {
                      widget.selectedValue = value;
                    });
                  },
                  value: selectedValue,
                  hint: Text('My courses'),
                ),
              ),
            );
          }
        })};
   

2.Usage you can called it like this

String selectedValue="Select Here"

rangeLists(selectedValue)//call this as a widget in ur ui

It will handle all list from the Api backend when u return a list u don't need to worry about the error any more

Brierwood

Answer 21

enter image description here

I was searching a lot to find a better solution and at the and i found the solution if you clear the list at the end then it will not show the error for example your list name is "xyz" then at the end write xyz.clear() it will solve your problem 100%

Andesite

Answer 22

I Fixed this issue by resetting value to null if value is not present in items

class _RoundEdgedDropDown2State extends State<RoundEdgedDropDown2> {
  DropDownOption? selectedValue;

  @override
  Widget build(BuildContext context) {
    final items = _prepareDropDownItems(context);

    final selectedItemMatchPresentInItems = widget.data.firstWhereOrNull((element) => element == selectedValue) != null;
    if(!selectedItemMatchPresentInItems){
      selectedValue = null;
    }

    return DropdownButtonFormField<DropDownOption>(
      value: selectedValue,
      padding: EdgeInsets.zero,

The root cause of the issue: The user selected some value in the dropdown that you then stored in some variable, now you changed the data list and the value the user selected value is not present in the list anymore, so we set selectedValue to null if it is not present in list anymore

Note: You will need to notify the controller that you have reset the selected value too otherwise, the controller will be holding might not be present in the data list

Leesa

Answer 23

Can also occur if you dont add/pass value to your dropdownmenuitem

Morisco

Answer 24

    child: DropdownButtonFormField<String>(
      hint: Text(widget.hintText == "Select value..."
          ? "Select ${widget.caption}"
          : widget.hintText),
      items: getItems(),
      value: **checkValue(widget.currentValue)**,
      iconSize: 30,
      onChanged: widget.onChanged,
    ),
    
    String? **checkValue(String? value)** {
      var arrRet = widget.items.where(
          (item) => item[widget.valueMember].toString() == value.toString());
      if (arrRet.isEmpty && widget.items.isNotEmpty)
        return widget.items[0][widget.valueMember].toString();
      return value;
    }

Knapsack

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Pless