Instantly mark all checkboxes in dropdown without closing - flutter

Question

I have a drop down list with checkboxes. When selecting the first element All EV's - all elements are selected. But visually, when I select the first element, I only mark the first element that I clicked on. I need to close and reopen the dropdown to see the checkmarks everywhere. I want that when the first element is selected, the checkboxes are also checked everywhere, but it does not close the drop-down list, but immediately sees the checked checkboxes. How to do it?
dropdown
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;
List _selectedTitles = [];
List selectedItems = [];
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(() {
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);
}
});
}
}
#override
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
child: DropdownButtonHideUnderline(
child: DropdownButton2(
offset: const Offset(0, -12),
isExpanded: true,
items: List.generate(
widget.items.length,
(index) => DropdownMenuItem<String>(
value: widget.items[index],
child: Container(
decoration: BoxDecoration(
border: index == widget.items.length - 1
? null
: 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.xSmallLtStdDropDownTextStyleWhite,
)
: Text(
_selectedTitles.join().toString(),
style: constants.Styles.xSmallLtStdDropDownTextStyleWhite,
),
if (_selectedTitles.isEmpty)
const Text(
'Select EV',
style: constants.Styles.xSmallLtStdDropDownTextStyleWhite,
),
],
),
onChanged: (value) {
setState(() {
selectedValue = value as String;
});
},
icon: SvgPicture.asset(constants.Assets.arrowDropdown),
iconSize: 21,
buttonHeight: 27,
dropdownMaxHeight: 185,
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: constants.Colors.purpleMain,
),
color: constants.Colors.greyDark),
),
),
);
}
}
list
final List<String> carList = const [
"All EV's",
'Main EV',
'<EV2>',
];