隐藏底线并更改所选元素的样式Drowdown_button2

Question

我需要你的帮助。我正在使用 pub.dev 中的 dropdown_button2，但我运行遇到了一些我无法解决的问题。 第一个错误：如何改变选中元素的文字样式？我需要显示所选项目的文本更大。 第二个错误：需要去掉底线，显示在被选元素下方，当元素未被选中时，没有线，只有被选元素-线出现。下面我附上了我现在拥有的以及我最终需要得到的截图。非常感谢您的帮助。

下拉列表

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();
          },
        ),
      ),
    );
  }

目前我有

应该是结果

Answer 1

要更改所选元素的文本样式，请使用 selectedItemBuilder。它负责所选项在按钮上的显示方式。
所选元素下方的底线由您在主 Container 小部件中使用的 decoration 参数显示。删除它，底线应该消失了。

隐藏底线并更改所选元素的样式Drowdown_button2

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

dart

drop-down-menu

flutter