How to handle the list of dynamic dropdown in flutter? - flutter

Question

I need to have the list of add able dropdown of states,district. They can be added. I could add the forms but I need to set the district data according to the states.I get the states from the api. When selecting the states from dropdown I get the districts according to states from api.Its working fine with the district dropdown of index 0 but I am getting the error There should be exactly one item with [DropdownButton]'s value: 1. in other index. How can I achieve this. I followed this https://stackoverflow.com/a/63188955/8023701. I have implemented as follows:
Widget _buildStates(BuildContext context, int i) {
return
Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
state,
style: TextStyle(
// fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.red),
),
SizedBox(
width: 20,
),
DropdownButtonFormField(
validator: (value) => validateDrops(value),
isExpanded: true,
hint: Text(state),
value: _selectedState[i],
onChanged: (newValue) {
setState(() {
print("Stae value");
print(newValue);
_selectedState[i]= newValue;
getMyDistricts(newValue, i);
});
},
items: statess.map((Data item) {
return new DropdownMenuItem(
child: new Text(
item.provinceNepali,
),
value: item.id.toString(),
);
}).toList(),
)
],
));
}
District widget:
Widget _buildDistrict(BuildContext context, int i) {
return Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
district,
style: TextStyle(
// fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.red),
),
SizedBox(
width: 20,
),
mydis != null
? DropdownButtonFormField(
validator: (value) => validateDrops(value),
isExpanded: true,
hint: Text(select),
value: _selectedDistrict[i],
onChanged: (newValue) {
setState(() {
_selectedDistrict[i] = newValue;
getMyMuni(newValue, i);
});
},
items: mydis.map((Datas item) {
return new DropdownMenuItem(
child: new Text(
item.municipalityEnglish,
),
value: item.id.toString(),
);
}).toList(),
)
: Container()
],
));
}
I am getting states from api as follows:
void getAvgProvince() async {
setState(() {
_isLoading = true;
});
ProvinceResponse joinResponse = await getProvince();
if (joinResponse != null) {
setState(() {
statess = joinResponse.data;
_isLoading = false;
});
} else {
setState(() {
_isLoading = false;
});
}
}
And district as follows:
void getMyDistricts(newValue, int i) async {
DistrictResponse joinResponse = await getDistrict(newValue);
if (joinResponse != null) {
setState(() {
mydis = joinResponse.data;
_isLoading = false;
});
} else {
setState(() {
_isLoading = false;
});
}
}

Answer 1

The DropdownButton error There should be exactly one item with [DropdownButton]'s value: 1 occurs because the initial selected value of the dropdown is null. What you can do here is add a placeholder value for the dropdown if it's yet to be active. You can follow a similar approach on this answer.