如何从 flutter 中的 dropdown_dropdown2 包中删除下拉列表中的下划线

Question

GetBuilder<StudentController>(builder: (_) {
  return Container(
    height: 50,
    width: 250,
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius:
            BorderRadius.circular(10),
        border: Border.all(
            color: const Color(0xff636363))),
    child: Padding(
      padding: const EdgeInsets.only(
        left: 10,
        right: 10,
      ),
      child: DropdownButton2<String>(
        isExpanded: true,
        hint: Text(
          'Select Item',
          style: TextStyle(
            fontSize: 14,
            color:
                Theme.of(context).hintColor,
          ),
        ),
        items: studentController
            .studentsFeeList
            .map((item) => DropdownMenuItem(
                  value: item,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 14,
                    ),
                  ),
                ))
            .toList(),
        value: studentSelected,
        onChanged: (value) {
          setState(() {
            studentSelected = value as String;
          });
        },
        buttonStyleData:
            const ButtonStyleData(
          height: 40,
          width: 250,
        ),
        dropdownStyleData: DropdownStyleData(
            maxHeight: 200,
            width: 250,
            offset: Offset(-10, 0),
            decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.circular(
                        10))),
        menuItemStyleData:
            const MenuItemStyleData(
          height: 40,
        ),
        dropdownSearchData:
            DropdownSearchData(
          searchController: searchController,
          searchInnerWidgetHeight: 50,
          searchInnerWidget: Container(
            height: 50,
            padding: const EdgeInsets.only(
              top: 4,
              bottom: 4,
              right: 4,
              left: 4,
            ),
            child: TextFormField(
              expands: true,
              maxLines: null,
              controller: searchController,
              decoration: InputDecoration(
                isDense: true,
                contentPadding:
                    const EdgeInsets
                        .symmetric(
                  horizontal: 10,
                  vertical: 8,
                ),
                hintText:
                    'Search for an item...',
                hintStyle: const TextStyle(
                    fontSize: 12),
                border: OutlineInputBorder(
                  borderRadius:
                      BorderRadius.circular(
                          8),
                ),
              ),
            ),
          ),
          searchMatchFn: (item, searchValue) {
            return (item.value
                .toString()
                .contains(searchValue));
          },
        ),
        //This to clear the search value when you close the menu
        onMenuStateChange: (isOpen) {
          if (!isOpen) {
            searchController.clear();
          }
        },
      ),
    ),
  );
}),

我在下拉菜单中有下划线，请参考上图，下拉代码并帮助我

Answer 1

flutter 中有一个名为

DropdownButtonHideUnderline

的小部件，用这个小部件包裹您的

DropdownButton2

小部件来解决您的问题。

Answer 2

在dropdown_button2文档中，有

underline

属性隐藏下划线。

Answer 3

以下是我用过的代码，里面没有下划线你可以尝试实现以下

Expanded(
                  child: ListTile(
                    title: const Padding(
                      padding: EdgeInsets.only(bottom: 0),
                      child: Text(
                        "Compounding \nFrequency",
                        style: TextStyle(
                            fontWeight: FontWeight.w500, fontSize: 15),
                      ),
                    ),
                    subtitle: DropdownButtonFormField(
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                      ),
                      value: dropdownvalue,
                      icon: const Icon(Icons.keyboard_arrow_down),
                      items: items.map(
                        (String items) {
                          return DropdownMenuItem(
                            value: items,
                            child: Text(items),
                          );
                        },
                      ).toList(),
                      onChanged: (String? newValue) {
                        setState(
                          () {
                            dropdownvalue = newValue!;
                          },
                        );
                      },
                    ),
                  ),
                ),

您可以尝试的另一种方法是： 您还可以将

underline

属性设置为

Container()

小部件，这会删除默认的下划线

DropdownButton<String>(
  value: dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  underline: Container(), // Remove the underline
),

Answer 4

Widget build(BuildContext context) {
return Scaffold(
body: Center(
  child: DropdownButtonHideUnderline(    // <------- add to hide underline
    child: DropdownButton2(
      hint: Text(
        'Select Item',
        style: TextStyle(
          fontSize: 14,
          color: Theme.of(context).hintColor,
        ),
      ),
      items: items
              .map((item) => DropdownMenuItem<String>(
        value: item,
        child: Text(
          item,
          style: const TextStyle(
            fontSize: 14,
          ),
        ),
      ))
              .toList(),
      value: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value as String;
        });
      },
      buttonStyleData: const ButtonStyleData(
        height: 40,
        width: 140,
      ),
      menuItemStyleData: const MenuItemStyleData(
        height: 40,
      ),
    ),
  ),
),);}