I created a custom widget to place some ChoiceChips in my filtering options. However, despite following some tutorials about, I am unable to make a single selection properly. Although it is filtering as it should with single selection, the color of the chips behaves as a multiple selection.

Here's my code:

return SingleChildScrollView(
      child: Column(
        children: [
          Wrap(
            children: <Widget>[
              for (var i = 0; i < attributesFoundDistinct.length; i  )
                FilterChipCustom(
                    chipSelected: _selected[i],
                    color: Colors.green,
                    filtered: filteredByTag,
                    label: attributesFoundDistinct[i],
                    onSelected: (bool selected) {
                      setState(() {
                        attributesSelected = [];
                        _selected[i] = selected;
                        snapList = snapListAll;
                        _filteredDogList = snapList
                            .where((dog) => (dog[attributesFoundDistinct[i]]
                                .toLowerCase()
                                .contains(textControllerValue.toLowerCase())))
                            .toList();
                        filteredByTag = true;
                        attributesSelected.add(attributesFoundDistinct[i]);
                      });
                    }),
            ],
          ),
        ],
      ),
    );
  }
}

class FilterChipCustom extends StatelessWidget {
  var label;
  var color;
  var filtered;
  var chipSelected;
  final ValueChanged<bool> onSelected;

  FilterChipCustom(
      {Key? key,
      required this.label,
      this.color,
      required this.onSelected,
      this.chipSelected,
      this.filtered})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      labelStyle: TextStyle(color: Colors.white),

      labelPadding: EdgeInsets.all(5.0),
      avatar: CircleAvatar(
        //backgroundColor: Color.fromARGB(255, 123, 148, 116),
        child: Text(label[0].toUpperCase()),
      ),
      label: Text(
        label,
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      onSelected: onSelected,
      selectedColor: Colors.blue,
      selected: chipSelected,
      backgroundColor: Colors.grey,
      //selectedColor: color,
      elevation: 6.0,
      shadowColor: Colors.red[60],
      padding: EdgeInsets.all(6.0),
      //showCheckmark: true,
    );
  }
}

and my variables:

int _value = 0;
  bool filteredByTag = false;
  List attributesSelected = [];
  List<bool> _selected = [false, false, false];
  List attributesFound = [];
  var DogGenders = ["Male", "Female", "All"];

CodePudding user response：

Clear previous selection when a new one is selected.

onSelected: (bool selected) {
  setState(() {
...
    _selected = [false, false, false];
    _selected[i] = selected;
...
  });
}),

A simpler solution would be to have selectedIndex as only one can be selected at the time.