I have two dropdownbutton, they differ in that one has checkboxes and the other doesn't. The code is similar and I think it would be better to put everything in one class. I tried to do this, the dropdownbutton with the checkbox did not work correctly for me. Can you tell me if these 2 codes can be placed in one class? And how to do it right?

code_1

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

  DropdownWidget(
      {Key? key,
      required this.items,
      required this.icon,
      required this.width,
      this.isCheckbox = false})
      : 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,
                            ),
                          ),
                          if (item == selectedValue)
                            const Icon(
                              Icons.check,
                              color: constants.Colors.purpleMain,
                            ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
              .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();
          },
        ),
      ),
    );
  }
}

code_2

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

  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(
          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('Selecte EV',
                      style: constants.Styles.xSmallLtStdTextStyleWhite)
                  : Text(_selectedTitles.join().toString(),
                      style: constants.Styles.bigBookTextStyleWhite),
            ],
          ),
          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();
          },
        ),
      ),
    );
  }
}

CodePudding user response：

Create a class such as MultiDropDownBox and pass a required bool in constructor such as isCheckBox . Return the required widget as per bool value.

Example code snippet

class MultiDropdownBox extends StatefulWidget {
  final bool isCheckbox;

  MultiDropdownBox(
      {Key? key,
      required this.isCheckBox,
      })
      : super(key: key);

  @override
  State<MultiDropdownBox> createState() => _MultiDropdownBoxState();
}

class _MultiDropdownBoxState extends State<MultiDropdownBox> {
  bool isChecked = widget.isChecked;


  @override
  Widget build(BuildContext context) {

    if(isChecked){return CheckboxDropdown()};

    else{return DropdownWidget()}
}

Upvote if it helped :)