dartflutter

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"),
      ),
    ],
  ),

Solution

  • 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>>[
              ....