Menu
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"),
),
],
),
648
To remove TextField underline/border in Flutter, you can simply set the border property to InputBorder. none. This will remove the underline for all states such as Focused, Enabled, Error, Disabled.
To change underline color use the underline property of the Dropdown widget and then assign the Container widget with height and color property. Inside the Dropdown widget, and add the underline property and assign the Container widget. Inside the Container , add the color property and assign the color.
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>>[
....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
