Hide the bottom line and change the style of the selected element Drowdown_button2

Question

I need your help. I'm using dropdown_button2 from pub.dev but I've run into a few issues that I can't resolve. First mistake: how to change the text style of the selected element? I need the text that displays the selected item to be larger. The second mistake: you need to remove the bottom line, which is displayed under the selected element, when the element is not selected, there is no line, only the element is selected - the line appears. Below I have attached screenshots of what I have now and what I need to get in the end. I would appreciate your help.

dropdown

Widget build(BuildContext context) {
    return Container(
      width: 120,
      decoration: BoxDecoration(
        border: Border(
          bottom: selectedValue != null
              ? const BorderSide(
                  color: constants.Colors.white,
                )
              : BorderSide.none,
        ),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          hint: const Text(
            'Select',
            style: constants.Styles.bigBookTextStyleWhite,
          ),
          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,
          buttonElevation: 1,
          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 Center(
                child: Text(
                  item,
                  style: constants.Styles.smallTextStyleWhite,
                ),
              );
            }).toList();
          },
        ),
      ),
    );
  }

at the moment I have

should be the result

Answer 1

1. To change text style of the selected element use selectedItemBuilder. It's responsible for how the selected item will be displayed on button.

2. The bottom line under the selected element is shown by the decoration parameter you're using in the main Container widget. Remove it and bottom line should be gone.