How to handle dropdownbox for listview flutter - flutter

Question

I have a listView with dropdownbox attached each item. They are being populated with items. I have two issues now. First when I select from each item, the selected value does not appear on the checkbox. Also, I need to handle them independently such that they could be selected individually. What happens now is that on launch of the app, there is no value at default till I select. Also, when I select it sets all others on the list.
Here's my code guys.
ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: mainBloc.orders.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#240C44"),
width: 0.5),
color: HexColor("#180332"),
borderRadius:
BorderRadius.all(Radius.circular(4))),
margin: EdgeInsets.only(
top: 10, bottom: 10, left: 0, right: 0),
child: ListTile(
title: Row(
children: <Widget>[
new Image.asset(
"assets/images/order_list_image.png",
width: 40,
height: 40,
),
Spacer(),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: mainBloc.orders[index].status=="enroute"?
HexColor("#FF9F1C"):
mainBloc.orders[index].status=="delivered"?
HexColor("#71F79F"):
Colors.white.withOpacity(0.6),
border: Border.all(
color: HexColor("#FF9F1C"),
style: BorderStyle.solid,
width: 0.80),
),
child: new DropdownButton<String>(
items: <String>['Delivered', 'Enroute', 'Processed'
].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(
value,
style: TextStyle(
color: primaryColor,
fontSize: 14,
fontFamily: 'CircularStd',
fontWeight: FontWeight.w500,
),
),
);
}).toList(),
onChanged: (_) {
},
),
),
SizedBox(
width: 20,
),
IconButton(
icon: Image.asset(
"assets/images/edit.png",
width: 15,
height: 15,
color: Colors.white,
), onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
EditOrderPage(index:index)),
);
},
),
],
),
),
);
}),

Answer 1

To manage the state of each of your dropdownbutton you need to wrap your list item inside a StatefulWidget.
Here is my implementation of your example :
Code Sample
class ListItem extends StatefulWidget {
final String label;
final String defaultStatus;
ListItem({this.label, this.defaultStatus = 'Enroute'});
#override
createState() => _ListItemState();
}
class _ListItemState extends State<ListItem> {
String _status;
#override
void initState() {
super.initState();
_status = widget.defaultStatus;
}
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: _status == null || _status.toLowerCase() == 'processed'
? Colors.white.withOpacity(0.6)
: _status.toLowerCase() == "enroute"
? Color(0xFFFF9F1C)
: Color(0xFF71F79F),
border: Border.all(
color: Color(0xFFFF9F1C), style: BorderStyle.solid, width: 0.80),
),
child: Row(children: <Widget>[
if (widget.label != null && widget.label.isNotEmpty)
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(widget.label),
),
DropdownButton<String>(
value: _status,
items:
<String>['Delivered', 'Enroute', 'Processed'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
);
}).toList(),
onChanged: (val) => setState(() => _status = val),
),
]),
);
}
}
Try it on DartPad
Screenshot