I have created a dropdown within a function, and I call this function multiple times for different images. The problem is that the image is changing when I call the function, while the dropdown remains same, that is, when I change the value of one dropdown, all the dropdown to set to the same value. The code that I've tried is below:
//declaration
List<ListItem> _dropdownItems = [
ListItem(1, "1"),
ListItem(2, "2"),
ListItem(3, "3"),
ListItem(4, "4"),
];
List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
ListItem _selectedItem;
void initState() {
super.initState();
_dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
_selectedItem = _dropdownMenuItems[0].value;
}
//function
Widget card(img) {
return Row(
children: [
Card(
elevation : 5,
child: Column(
children: [
Image.network(img),
],
),
),//card
Container(
child: Center(
child: DropdownButton<ListItem>(
icon: Icon(
Icons.arrow_dropdown,
color: Colors.white,
),
value: _selectedItem,
items: _dropdownMenuItems,
onChanged: (value) {
setState(() {
_selectedItem = value;
});
}),
),
), //container
],
),//row
}
//calling the function
Column(
children: [
for(i in xscreen)
card(i.imgurl),
],
),
How can I change the values of every dropdown dynamically and independently? Any help is appreciated. Thanks in advance!