How to select all checkboxes in dropdownbutton flutter when selecting one checkbox?

Question

I have a drop down list with checkbox elements. Tell me, can I make it so that when selecting 1 element, in my case it is All EV's, all other checkboxes of the elements in the drop-down list are selected and if you click again, they disappear? I still don’t understand how to implement this and whether it’s real, I’ll be grateful if you help, maybe I’m trying in vain and this function cannot be implemented with dropdown.

list

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

dopdown

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

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

  @override
  State<CheckboxDropdown> createState() => _CheckboxDropdown();
}

class _CheckboxDropdown extends State<CheckboxDropdown> {
  String? selectedValue;
  bool selected = false;

  final List _selectedTitles = [];
  final List _selectedTitlesIndex = [];

  final GFCheckboxType type = GFCheckboxType.basic;

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

  void _onItemSelect(bool selected, int index) {
    if (selected == true) {
      setState(() {
        _selectedTitles.add(widget.items[index]);
        _selectedTitlesIndex.add(index);
      });
    } else {
      setState(() {
        _selectedTitles.remove(widget.items[index]);
        _selectedTitlesIndex.remove(index);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          offset: const Offset(0, -12),
          items: List.generate(
            widget.items.length,
            (index) => DropdownMenuItem<String>(
              value: widget.items[index],
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.white.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                ),
                child: StatefulBuilder(
                  builder: (context, setStateSB) => GFCheckboxListTile(
                    value: _selectedTitles.contains(widget.items[index]),
                    onChanged: (bool selected) {
                      _onItemSelect(selected, index);
                      setStateSB(() {});
                    },
                    selected: selected,
                    title: Text(
                      widget.items[index],
                      style: constants.Styles.smallTextStyleWhite,
                    ),
                    padding: const EdgeInsets.only(top: 12, bottom: 13),
                    margin: const EdgeInsets.only(right: 0, left: 0),
                    size: 22,
                    activeBgColor: constants.Colors.greyCheckbox,
                    activeBorderColor: constants.Colors.greyXMiddle,
                    inactiveBgColor: constants.Colors.greyCheckbox,
                    activeIcon: SvgPicture.asset(constants.Assets.checkboxIcon),
                    inactiveBorderColor: constants.Colors.greyXMiddle,
                    type: type,
                  ),
                ),
              ),
            ),
          ),
          hint: Row(
            children: [
              SvgPicture.asset(constants.Assets.carDropdown),
              const SizedBox(width: 8),
              _selectedTitles.length > 1
                  ? const Text('Selected EV',
                      style: constants.Styles.xSmallHeavyTimerTextStyleWhite)
                  : Text(_selectedTitles.join().toString(),
                      style: constants.Styles.bigBookTextStyleWhite),
              if (_selectedTitles.isEmpty)
                const Text('Select EV',
                    style: constants.Styles.xSmallHeavyTimerTextStyleWhite)
            ],
          ),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          icon: SvgPicture.asset(constants.Assets.arrowDropdown),
          iconSize: 21,
          buttonHeight: 27,
          itemHeight: 47,
          dropdownMaxHeight: 185,
          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();
          },
        ),
      ),
    );
  }
}

Answer 1

Update your _onItemSelect function to something like this:

void _onItemSelect(bool selected, int index) {
    if (selected == true) {
      setState(() {
       
        //Check if its "All EV's" index
        if (index == 0) {
          _selectedTitles = List.from(widget.items);
          _selectedTitlesIndex = List.generate(widget.items.length, (index) => index);
        } else{
          _selectedTitles.add(widget.items[index]);
          _selectedTitlesIndex.add(index);
        }
      });
    } else {
      setState(() {
        if (index == 0) {
          _selectedTitles.clear();
          _selectedTitlesIndex.clear();
        } else{
          _selectedTitles.remove(widget.items[index]);
          _selectedTitlesIndex.remove(index);
        }
      });
    }
  }

Answer 2

Change your variable selected to list boolean add some code to onChanged in GFCheckboxListTile,

if(indexSelected==all) change list all value selected to true
setstate