title: Combine two similar classes into one class in flutter
body: <p>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?</p>
  <p><strong>code_1</strong></p>
  <pre><code>class DropdownWidget extends StatefulWidget {
    List&lt;String&gt; 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&lt;DropdownWidget&gt; createState() =&gt; _DropdownWidgetState();
  }
  
  class _DropdownWidgetState extends State&lt;DropdownWidget&gt; {
    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) =&gt; DropdownMenuItem&lt;String&gt;(
                    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></pre>
  <p><strong>code_2</strong></p>
  <pre><code>class CheckboxDropdown extends StatefulWidget {
    List&lt;String&gt; items;
    SvgPicture? icon;
    double width;
  
    CheckboxDropdown({
      Key? key,
      required this.items,
      this.icon,
      required this.width,
    }) : super(key: key);
  
    @override
    State&lt;CheckboxDropdown&gt; createState() =&gt; _CheckboxDropdown();
  }
  
  class _CheckboxDropdown extends State&lt;CheckboxDropdown&gt; {
    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) =&gt; DropdownMenuItem&lt;String&gt;(
                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) =&gt; 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 &gt; 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();
            },
          ),
        ),
      );
    }
  }
  </code></pre>