multiple selection inside the drop down menu in 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

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 2

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 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.