在下拉按钮中单击时复选框不会更改

Question

I am using DropdownButton and I am facing the following issue. I'm using a checkbox in elements, but when I click on an element, I don't get a checkmark indicating that the checkbox has been clicked. As a result, I need to close and reopen it, and then I will see the changes that were clicked on the " checkbox ". The second problem is that when I select one element, all elements are selected for me. As a final result, I need to get so that I can select an element and the checkbox is immediately marked, if 2 elements are needed, then two, and so on. Tell me how to fix these problems, I will be grateful for the help?

dropdown

class DropdownWidget extends StatefulWidget {
  List<String> items;
  SvgPicture? icon;
  double width;

  DropdownWidget({
    Key? key,
    required this.items,
    required this.icon,
    required this.width,
  }) : super(key: key);

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  String? selectedValue;
  bool isChecked = false;

  @override
  void initState() {
    super.initState();
    if (widget.items.isNotEmpty) {
      selectedValue = widget.items[1];
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          items: widget.items
              .map((item) => DropdownMenuItem<String>(
                    value: item,
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            color: constants.Colors.white.withOpacity(0.1),
                            width: 1,
                          ),
                        ),
                      ),
                      child: Center(
                        child: Row(
                          children: [
                            if (item == selectedValue)
                              const SizedBox(
                                width: 0,
                              ),
                            Expanded(
                              child: Text(
                                item,
                                style: constants.Styles.smallTextStyleWhite,
                              ),
                            ),
                            Checkbox(
                              checkColor: Colors.black,
                              value: isChecked,
                              onChanged: (bool? value) {
                                setState(() {
                                  isChecked = value!;
                                });
                              },
                            ),
                          ],
                        ),
                      ),
                    ),
                  ))
              .toList(),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          icon: SvgPicture.asset(constants.Assets.arrowDropdown),
          iconSize: 21,
          buttonHeight: 27,
          itemHeight: 47,
          dropdownMaxHeight: 191,
          dropdownWidth: 140,
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: constants.Colors.purpleMain,
            ),
            color: constants.Colors.greyDark,
          ),
          selectedItemBuilder: (context) {
            return widget.items.map(
              (item) {
                return Row(
                  children: [
                    widget.icon ?? const SizedBox(),
                    const SizedBox(width: 8),
                    Text(
                      item,
                      style: constants.Styles.bigBookTextStyleWhite,
                    ),
                  ],
                );
              },
            ).toList();
          },
        ),
      ),
    );
  }
}

items

final List<String> items = const [
    "All EV's",
    'Main EV',
    '<EV2>',
  ];

Answer 1

I hope this example explains the concept. For simplcity I made simple a new file, run it and see the results:

Then main idea in two lists, _checkList contain values of the CheckBox and _selectedList handles the main dropdown widget to show the selection.

Feel free to ask any questions and I'm happy to help

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const AnimationDemo(number: 5);
  }
}

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({Key? key, this.number = 2}) : super(key: key);
  final int number;

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> {
  late List<bool> _checkList;
  late List<int> _selectedIndex;

  bool _isOpen = false;

  @override
  void initState() {
    _checkList = List.filled(widget.number, false);
    _selectedIndex = <int>[];
    super.initState();
  }

  List<DropDownItem> generateItems() {
    var tmp = <DropDownItem>[];

    for (var i = 0; i < _checkList.length; i++) {
      tmp.add(DropDownItem(
        isChecked: _checkList[i],
        onChanged: (value) {
          setState(() {
            _checkList[i] = value!;
            if (value && !_selectedIndex.contains(i)) {
              _selectedIndex.add(i);
            } else {
              _selectedIndex.remove(i);
            }
          });
        },
      ));
    }

    return tmp;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                child: Text((_selectedIndex.isEmpty)
                    ? 'Nothing Selected'
                    : _selectedIndex.join(',')),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    _isOpen = !_isOpen;
                  });
                },
                child: const Icon(Icons.arrow_downward),
              ),
            ],
          ),
          AnimatedOpacity(
            opacity: (_isOpen) ? 1 : 0,
            duration: const Duration(milliseconds: 300),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: generateItems(),
            ),
          )
        ],
      ),
    );
  }
}

class DropDownItem extends StatelessWidget {
  final bool isChecked;
  final Function(bool?)? onChanged;

  const DropDownItem({Key? key, this.onChanged, this.isChecked = false})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const Expanded(child: Text('Demo item')),
        Checkbox(value: isChecked, onChanged: onChanged)
      ],
    );
  }
}

Answer 2

Here's how to achieve the Multiselect dropdown with DropdownButton2:

final List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
];
List<String> selectedItems = [];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          isExpanded: true,
          hint: Align(
            alignment: AlignmentDirectional.center,
            child: Text(
              'Select Items',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
          ),
          items: items.map((item) {
            return DropdownMenuItem<String>(
              value: item,
              //disable default onTap to avoid closing menu when selecting an item
              enabled: false,
              child: StatefulBuilder(
                builder: (context, menuSetState) {
                  final _isSelected = selectedItems.contains(item);
                  return InkWell(
                    onTap: () {
                      _isSelected
                              ? selectedItems.remove(item)
                              : selectedItems.add(item);
                      //This rebuilds the StatefulWidget to update the button's text
                      setState(() {});
                      //This rebuilds the dropdownMenu Widget to update the check mark
                      menuSetState(() {});
                    },
                    child: Container(
                      height: double.infinity,
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Row(
                        children: [
                          _isSelected
                                  ? const Icon(Icons.check_box_outlined)
                                  : const Icon(Icons.check_box_outline_blank),
                          const SizedBox(width: 16),
                          Text(
                            item,
                            style: const TextStyle(
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            );
          }).toList(),
          //Use last selected item as the current value so if we've limited menu height, it scroll to last item.
          value: selectedItems.isEmpty ? null : selectedItems.last,
          onChanged: (value) {},
          buttonHeight: 40,
          buttonWidth: 140,
          itemHeight: 40,
          itemPadding: EdgeInsets.zero,
          selectedItemBuilder: (context) {
            return items.map(
                      (item) {
                return Container(
                  alignment: AlignmentDirectional.center,
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    selectedItems.join(', '),
                    style: const TextStyle(
                      fontSize: 14,
                      overflow: TextOverflow.ellipsis,
                    ),
                    maxLines: 1,
                  ),
                );
              },
            ).toList();
          },
        ),
      ),
    ),
  );
}

Also, I've added it as an example to the package doc "Example 4" so you can get back to it later.