How to handle dropdownbox for listview 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