multiple selection inside the drop down menu in flutter - flutter

Question

Hi In my App I have something like this.
where I have a dropdown which displaying 3 options, but is there any way I can select multiple options inside the dropdown in flutter? and to store the result of selected options inside the list?
or is it possible to do something like below in flutter?
Thanks.

Answer 1

Code:-
class CustomMultiselectDropDown extends StatefulWidget {
final Function(List<String>) selectedList;
final List<String> listOFStrings;
CustomMultiselectDropDown(
{required this.selectedList, required this.listOFStrings});
#override
createState() {
return new _CustomMultiselectDropDownState();
}
}
class _CustomMultiselectDropDownState extends State<CustomMultiselectDropDown> {
List<String> listOFSelectedItem = [];
String selectedText = "";
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.only(top: 10.0),
decoration:
BoxDecoration(border: Border.all(color: PrimeDentalColors.grey1)),
child: ExpansionTile(
iconColor: PrimeDentalColors.grey,
title: Text(
listOFSelectedItem.isEmpty ? "Select" : listOFSelectedItem[0],
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: PrimeDentalColors.grey,
fontWeight: FontWeight.w400,
fontSize: 15.0,
),
),
),
children: <Widget>[
new ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: widget.listOFStrings.length,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(bottom: 8.0),
child: _ViewItem(
item: widget.listOFStrings[index],
selected: (val) {
selectedText = val;
if (listOFSelectedItem.contains(val)) {
listOFSelectedItem.remove(val);
} else {
listOFSelectedItem.add(val);
}
widget.selectedList(listOFSelectedItem);
setState(() {});
},
itemSelected: listOFSelectedItem
.contains(widget.listOFStrings[index])),
);
},
),
],
),
);
}
}
class _ViewItem extends StatelessWidget {
String item;
bool itemSelected;
final Function(String) selected;
_ViewItem(
{required this.item, required this.itemSelected, required this.selected});
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Padding(
padding:
EdgeInsets.only(left: size.width * .032, right: size.width * .098),
child: Row(
children: [
SizedBox(
height: 24.0,
width: 24.0,
child: Checkbox(
value: itemSelected,
onChanged: (val) {
selected(item);
},
activeColor: PrimeDentalColors.blue,
),
),
SizedBox(
width: size.width * .025,
),
Text(
item,
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: PrimeDentalColors.grey,
fontWeight: FontWeight.w400,
fontSize: 17.0,
),
),
),
],
),
);
}
}

Answer 2

You could achieve that by using a custom widget as a child of the DropdownMenuItem, where the custom widget would need to be stateful so it can handle it's own state to show a check mark or something. And it should have it's own onTap method, so the DropdownMenuItem onTap won't trigger and select the option, dismissing the dropdown. You will also need to have an option to finalize the selection.
But I reccommend you to look another approach for this case for a better usability, like a dialog where you can select multiple options: Is there an equivalent widget in flutter to the "select multiple" element in HTML

Answer 3

You can use the following package
https://pub.dev/packages/multiselect
it has a dropdown based implementation instead of Dialog to show options.
PS: I needed this feature in a recent project and had to create my own widget. this is my implementation.