Question 77370 in Flutter Question posted in
The official Flutter documentation can be found here.

How to resolve this error "[DropdownMenuItem]s were detected with the same value" in flutter?

UI

enter image description here

in my code when two parameters has in country dropdown

enter image description here

when selected India, then show Indian provinces. Also, when selected USA, then show USA provinces in the province dropdown the way, after selecting a province, and again when changing the country, then show an error.

enter image description here

How to resolve this error when like that scenario I want show warning message or when change country then province should be to change initial value.

code


class _HomePageState extends State<HomePage> {
  List<String> countries = ['USA', 'India'];
  List<String> indiaProvince = ['New Delhi', 'Bihar', 'Rajasthan'];
  List<String> usaProvince = ['Texas', 'Florida', 'California'];

  List<String> provinces = [];
  String? selectedCountry;
  String? selectedProvince;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Level Dropdown'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20.0),
        children: [
          // Country Dropdown
          DropdownButton<String>(
            hint: Text('Country'),
            value: selectedCountry,
            isExpanded: true,
            items: countries.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (country) {
              if (country == 'USA') {
                provinces = usaProvince;
              } else if (country == 'India') {
                provinces = indiaProvince;
              } else {
                provinces = [];
              }
              setState(() {
                selectedProvince != 'null';
                selectedCountry = country;
              });
            },
          ),
          // Country Dropdown Ends here

          // Province Dropdown
          DropdownButton<String>(
            hint: Text('Province'),
            value: selectedProvince,
            isExpanded: true,
            items: provinces.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (province) {
              setState(() {
                selectedProvince = province;
              });
            },
          ),
          // Province Dropdown Ends here
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    There is duplication of values in your Drop down, you need to exclude duplication using some way, I recommend using toSet(),instead of this part of your code:

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

    Change it to this:

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

    then try running again

    Login or Signup to reply.
  2. 0

    Your issue is that you push indiaProvince and usaProvince into provinces every time country change, when you change country twice you will push two times indiaProvince into provinces, so change your country’s onChanged to this:

    onChanged: (country) {
  if (country == 'USA') {
    provinces = []; // <--- add this
    provinces = usaProvince;
  } else if (country == 'India') {
    provinces = []; // <--- add this
    provinces = indiaProvince;
  } else {
    provinces = [];
  }
  setState(() {
    selectedProvince = null; // <--- change this
    selectedCountry = country;
  });
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search