"There should be exactly one item with [DropdownButton]'s value: 1. \nEither zero or 2 or more [DropdownMenuItem]s were detected with the same value" - flutter-web

Question

I have this code:
import 'dart:convert';
import 'package:hr_jobform/customColors.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CitiesStateDropdownButton extends StatefulWidget {
const CitiesStateDropdownButton({super.key});
#override
State<CitiesStateDropdownButton> createState() =>
CitiesStateDropdownButtonState();
}
class CitiesStateDropdownButtonState
extends State<CitiesStateDropdownButton> {
#override
void initState() {
_getStatesList();
super.initState();
}
#override
Widget build(BuildContext context) {
return Wrap(children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(8, 15, 8, 8),
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size(219, 50)),
child: DropdownButton<String>(
value: _state,
iconSize: 30,
icon: (null),
style: TextStyle(
color: Palette.customColors,
fontSize: 16,
),
hint: Text('Select State'),
onChanged: (String? newValue) {
setState(() {
_state = newValue!;
_getCitiesList();
print(_state);
});
},
items: states?.map((item) {
return new DropdownMenuItem(
child: new Text(item['name']),
value: item['id'].toString(),
);
})?.toList() ??
[],
),
),
),
//======================================================== City
Wrap(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(8, 15, 8, 8),
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size(187, 50)),
child: DropdownButton<String>(
value: _city,
iconSize: 30,
icon: (null),
style: TextStyle(
color: Palette.customColors,
fontSize: 16,
),
hint: Text('Select City'),
onChanged: (String? newValue) {
setState(() {
_city = newValue!;
print(_city);
});
},
items: cities?.map((item) {
return new DropdownMenuItem(
child: new Text(item['name']),
value: item['id'].toString(),
);
})?.toList() ??
[],
),
),
),
],
),
]);
}
//=============================================================================== Api Calling here
//CALLING State API HERE
// Get Departamento information by API
late List states = [];
late String _state = '1';
String statesUrl =
"http://localhost:3000/states/getAllStates";
_getStatesList() async {
try {
http.Response response = await http.get(Uri.parse(statesUrl));
if (response.statusCode == 200) {
print(response.body);
var data = jsonDecode(response.body);
setState(() {
states = data['state'];
});
return jsonDecode(response.body);
} else {
return ("Server Error");
}
} catch (e) {
return print(e);
}
}
// Get Cities information by API
late List cities = [];
late String _city = '1';
_getCitiesList() async {
try {
http.Response response = await http.get(Uri.parse("http://localhost:3000/cities/getAllCities?id=$_state"));
if (response.statusCode == 200) {
print(response.body);
var data = jsonDecode(response.body);
setState(() {
cities = data['City'];
print(cities);
});
return jsonDecode(response.body);
} else {
return ("Server Error");
}
} catch (e) {
return print(e);
}
}
}
It runs well, but when i select one of the States on my dropdown list, the cities api call is successful as it appears on console, but the cities dropdown gives me this error:
Assertion failed:
items == null || items.isEmpty || value == null ||
items.where((DropdownMenuItem<T> item) {
return item.value == value;
}).length == 1
"There should be exactly one item with [DropdownButton]'s value: 1. \nEither zero or 2 or more [DropdownMenuItem]s were detected with the same value"
Please I've been struggling with this error for a couple of days now, I would appreciate if you can help me.

Answer 1

While using with future items from dropDown, use nullable value for DropdownButton.
String? _state;
String? _city;
And set Value on successful response only, otherwise set _city=null and _state = null
setState(() {
final List<String> items = data['City'].toList().toSet(); // trying to get unique value set
cities = items.toList();
_city = cities.first;
print(cities);
});
Do the same for others