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.
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(),
)