CODEWITHSUNDEEP
flutterdropdown
Mark12
Mark12

Reputation: 219

multiple selection inside the drop down menu in flutter

Hi In my App I have something like this.

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?

enter image description here

Thanks.

Upvotes: 7

Views: 27844

Answers (3)

Paras Arora
Paras Arora

Reputation: 703

enter image description here

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,
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }

Upvotes: 8

T-X
T-X

Reputation: 165

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.

Upvotes: 2

Pablo Barrera
Pablo Barrera

Reputation: 10953

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

Upvotes: 4

Related Questions