Question 75522 in Flutter Question posted in
The official Flutter documentation can be found here.

how get rid off underline in dropdown from dropdown_dropdown2 package in flutter

enter image description here

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

I am getting underline in dropdown,please refer above image,dropdown code and help me

Tags:

4

Answers


  1. 0

    there is a widget in flutter called DropdownButtonHideUnderline wrap your DropdownButton2 widget with this one to solve your issue.

    Login or Signup to reply.
  2. 0

    Following is a code that I have used and I do not have the underline in it you can try to implement the following

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

    Another approach that you can try is:
    You can also set the underline property to Container() widget which removes the default underline

    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
),
    Login or Signup to reply.
  3. 0

    In dropdown_button2 documentation, there is underline property to hide underline.

    Login or Signup to reply.
  4. 0 
    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,
      ),
    ),
  ),
),);}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search