skip to Main Content

i’m trying to remove the underline from the selected value in a DropdownButtonFormField, tried different solutions from this thread but none of them gave me the wanted result.

Here is a screenshot from the field:

enter image description here

And here is my code:

Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
                    child: Container(
                      padding: EdgeInsets.only(left: 20),
                      decoration: BoxDecoration(
                          color: Colors.grey[200],
                          border: Border.all(color: Colors.white),
                          borderRadius: BorderRadius.circular(12)),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButtonFormField<String>(
                          decoration: InputDecoration(
                              enabledBorder: UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: Colors.transparent))),
                          hint: Text('Type d'utilisateur'),
                          items: types.map(buildMenuItem).toList(),
                          onChanged: (value) {
                            setState(() {
                              type = value!;
                            });
                          },
                          value: type,
                          isExpanded: true,
                          iconSize: 26,
                          icon: Padding(
                            padding: const EdgeInsets.only(right: 8.0),
                            child: Icon(
                              Icons.arrow_drop_down,
                              color: Colors.black,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

2

Answers


  1. You can use border: InputBorder.none

    child: DropdownButtonHideUnderline(
      child: DropdownButtonFormField<String>(
        decoration: InputDecoration(border: InputBorder.none),
    
    Login or Signup to reply.
  2. You just need to change the border type of the DropDownButtonFormField from UnderlineInputBorder to InputBorder.none

                     Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 25.0),
                            child: Container(
                              padding: EdgeInsets.only(left: 20),
                              decoration: BoxDecoration(
                                  color: Colors.grey[200],
                                  border: Border.all(color: Colors.white),
                                  borderRadius: BorderRadius.circular(12)),
                              child: DropdownButtonHideUnderline(
                                child: DropdownButtonFormField<String>(
                                  decoration: InputDecoration(
                                      border: InputBorder.none, //just change this
                                  hint: Text('Type d'utilisateur'),
                                  items: types.map(buildMenuItem).toList(),
                                  onChanged: (value) {
                                    setState(() {
                                      type = value!;
                                    });
                                  },
                                  
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search