So, what I'm trying to do is use multi_select_dropdown to allow the users of a dating app to select multiple things such as genders and orientations, but I keep getting the variable error in the subject. Here is where I'm declaring the lists:
''' static List<LookingGender> _lookingGender = [
LookingGender(id: 1, name: 'Male'),
LookingGender(id: 2, name: 'Female'),
LookingGender(id: 3, name: 'TransMale'),
LookingGender(id: 4, name: 'TransFemale'),
LookingGender(id: 5, name: 'Non-Binary'),
LookingGender(id: 6, name: 'Agender'),
LookingGender(id: 7, name: 'Androgynous'),
LookingGender(id: 8, name: 'Genderfluid'),
LookingGender(id: 9, name: 'Genderqueer'),
LookingGender(id: 10, name: 'Intersex'),
LookingGender(id: 11, name: 'Two Spirit'),
];
final _selectedLookingGender = _lookingGender
.map((lookingGender) =>
MultiSelectItem<LookingGender>(lookingGender, lookingGender.name))
.toList();
List<LookingGender> _selectedLookingGender2 = [];
List<LookingGender> _selectedLookingGender3 = [];
List<LookingGender> _selectedLookingGender5 = [];
final _multiSelectKey = GlobalKey<FormFieldState>();
static List<LookingOrientation> _lookingOrientation = [
LookingOrientation(id: 1, name: 'Heterosexual'),
LookingOrientation(id: 2, name: 'Homosexual'),
LookingOrientation(id: 3, name: 'Lesbian'),
LookingOrientation(id: 4, name: 'Gay'),
LookingOrientation(id: 5, name: 'Demisexual'),
LookingOrientation(id: 6, name: 'Pansexual'),
LookingOrientation(id: 7, name: 'Asexual'),
LookingOrientation(id: 8, name: 'Bisexual'),
LookingOrientation(id: 9, name: 'Bicurious'),
];
final _selectedLookingOrientation = _lookingOrientation
.map((lookingOrientation) => MultiSelectItem<LookingOrientation>(
lookingOrientation, lookingOrientation.name))
.toList();
List<LookingOrientation> _selectedLookingOrientation2 = [];
List<LookingOrientation> _selectedLookingOrientation3 = [];
List<LookingOrientation> _selectedLookingOrientation5 = [];'''
And here is where things get wonky. The error appears to be on the 'values' variable.
''' // Looking for Gender field
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withOpacity(0.4),
border: Border.all(
color: Theme.of(context).primaryColor,
width: 2,
),
),
child: Column(
children: <Widget>[
MultiSelectBottomSheetField(
initialChildSize: 0.4,
listType: MultiSelectListType.CHIP,
searchable: true,
buttonText: Text('Looking for Gender'),
title: Text('Genders'),
items: _selectedLookingGender,
onConfirm: (values) {
_selectedLookingGender2 = values;
},
chipDisplay: MultiSelectChipDisplay(
onTap: (value) {
setState(() {
_selectedLookingGender2.remove(value);
});
},
),
),
_selectedLookingGender2 == null ||
_selectedLookingGender2.isEmpty
? Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: const Text(
"None Selected",
style: TextStyle(color: Colors.black54),
))
: Container(),
],
),
),
SizedBox(height: 20),
MultiSelectChipField<LookingGender>(
items: _selectedLookingGender,
initialValue: [_lookingGender[1]],
title: const Text('Genders'),
headerColor: Colors.blue.withOpacity(0.5),
decoration: BoxDecoration(
border:
Border.all(color: (Colors.blue[700]!), width: 1.8),
),
selectedChipColor: Colors.blue.withOpacity(0.5),
selectedTextStyle: TextStyle(color: Colors.blue[800]),
onTap: (values) {},
),
const SizedBox(height: 20),
// Looking for Orientation field
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withOpacity(0.4),
border: Border.all(
color: Theme.of(context).primaryColor,
width: 2,
),
),
child: Column(
children: <Widget>[
MultiSelectBottomSheetField(
initialChildSize: 0.4,
listType: MultiSelectListType.CHIP,
searchable: true,
buttonText: Text('Looking for Gender'),
title: Text('Genders'),
items: _selectedLookingGender,
onConfirm: (values) {
_selectedLookingGender2 = values;
},
chipDisplay: MultiSelectChipDisplay(
onTap: (value) {
setState(() {
_selectedLookingGender2.remove(value);
});
},
),
),
_selectedLookingGender2 == null ||
_selectedLookingGender2.isEmpty
? Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: const Text(
"None Selected",
style: TextStyle(color: Colors.black54),
))
: Container(),
],
),
),
MultiSelectChipField(
items: _selectedLookingOrientation,
initialValue: [_lookingOrientation[1]],
title: const Text('Orientation'),
headerColor: Colors.blue.withOpacity(0.5),
decoration: BoxDecoration(
border:
Border.all(color: (Colors.blue[700]!), width: 1.8),
),
selectedChipColor: Colors.blue.withOpacity(0.5),
selectedTextStyle: TextStyle(color: Colors.blue[800]),
onTap: (values) {},
),
const SizedBox(height: 20),'''
I am a newby at this, so it's been a somewhat painful journey.
CodePudding user response：
You can try this:
MultiSelectBottomSheetField(
initialChildSize: 0.4,
listType: MultiSelectListType.CHIP,
searchable: true,
buttonText: Text('Looking for Gender'),
title: Text('Genders'),
items: _selectedLookingGender,
onConfirm: (values) {
List<LookingGender> tempSelectedLookingGender = [];
var newValues = values as List<MultiSelectItem<LookingGender>>;
newValues.forEach((element) {
tempSelectedLookingGender.add(element.value);
});
_selectedLookingGender2 = tempSelectedLookingGender;
},
chipDisplay: MultiSelectChipDisplay(
onTap: (value) {
setState(() {
_selectedLookingGender2.remove(value);
});
},
),
),