Remove underline from DropdownButtonFormField

How can I remove the underline from DropdownButtonFormField (check photo below), I have tried various combinations of options with InputDecortaion couldn't find any way.

DropdownButtonFormField

SizedBox(
  width: 100.0,
  child: DropdownButtonFormField<int>(
    decoration: InputDecoration(
        border: UnderlineInputBorder(
            borderSide:
                BorderSide(color: Colors.white))),
    value: 2,
    items: <DropdownMenuItem<int>>[
      DropdownMenuItem<int>(
        value: 1,
        child: Text("Owner"),
      ),
      DropdownMenuItem<int>(
        value: 2,
        child: Text("Member"),
      ),
    ],
  ),

Just wrap DropdownButton inside DropdownButtonHideUnderline like this :

new DropdownButtonHideUnderline(
 child: DropdownButton()
)

Setting the underline property to SizedBox() makes it invisible too:

...

DropdownButton(
  underline: SizedBox(),

...

One way of Doing it :

In your Code - change decoration: InputDecoration to decoration: InputDecoration.collapsed

body: SizedBox(
          width: 100.0,
          child: DropdownButtonFormField<int>(
            decoration: InputDecoration.collapsed(hintText: ''),
            value: 2,
            ...

OR

In your Code - instead of border Use enabledBorder: UnderlineInputBorder

DropdownButtonFormField<int>(
          decoration: InputDecoration(
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white))),
          value: 2,
          items: <DropdownMenuItem<int>>[
          ....

The proper/clean solution nowadays is to use InputBorder.none:

DropdownButtonFormField<int>(
  decoration: InputDecoration(
    enabledBorder: InputBorder.none,
    ...
  ),
  ...
)

You might also want to set border, focusedBorder, errorBorder, and disabledBorder to InputBorder.none if you want to avoid the border from showing in all cases.


underline can take a widget so, you just have assigned it an empty Container, or a SizedBox.shrink()

                  underline:Container(),
                         -- or --
                  underline:SizedBox.shrink(),

Example :

child: DropdownButton<String>(
                  // Just have to assign to a empty Container
                  underline:Container(),
                  value: dropdownValue,
                  icon: Icon(Icons.keyboard_arrow_down),
                  iconSize: 24,
                  elevation: 16,
                  onChanged: (String newValue) {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  items:[
                    deptList[0].dept,
                    deptList[1].dept,
                    deptList[2].dept,
                    deptList[3].dept,
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                )