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

UI

in my code when two parameters has in country dropdown

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.

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
        ],
      ),
    );
  }
}

>Solution :

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;
  });
},