Remove underline from DropdownButtonFormField
DartFlutterDart Problem Overview
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"),
),
],
),
Dart Solutions
Solution 1 - Dart
Just wrap DropdownButton inside DropdownButtonHideUnderline like this :
new DropdownButtonHideUnderline(
child: DropdownButton()
)
Solution 2 - Dart
Setting the underline property to SizedBox() makes it invisible too:
...
DropdownButton(
underline: SizedBox(),
...
Solution 3 - Dart
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>>[
....
Solution 4 - Dart
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.
Solution 5 - Dart
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(),
)
Solution 6 - Dart
Add underline: Container() to your settings like this:
SizedBox(
...
underline: Container(),
),
Solution 7 - Dart
According to this [Flutter Doc] You can do like this. Simply create an object of DropdownButtonHideUnderline class and pass your current implementation of the DropdownButton as the child of DropdownButtonHideUnderline. Thts it ;)
DropdownButtonHideUnderline(
child: new DropdownButton<String>(
......
),
),
Solution 8 - Dart
You can change underline property to blank or null widget it will work like charm check the below property
underline: widget or SizedBox(),
Ex:-
DropdownButton
Solution 9 - Dart
As of now, DropdownButtonFormField doesn't support DropdownButtonHideUnderline.
Although it uses it under the hood to remove the underline from DropdownButton but then applies it's own decoration on top of that
Setting border to InputBorder.none will do the job
DropdownButtonFormField<String>(
decoration: InputDecoration(border: InputBorder.none)
)
If you want the border to appear on error you can use
InputDecoration(
border: InputBorder.none,
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
),
Solution 10 - Dart
use
DropdownButton<String>(
hint: Text("Status"),
value: 'Text Default',
isExpanded: true,
iconSize: 30,
underline: Container(
height: 1.0,
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.transparent, width: 0.0))
),
),
...
Solution 11 - Dart
if DropdownButtonFormField text get trim due to outline border then use this code:
DropdownButtonFormField<String>(
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)),
isDense: true,)
Solution 12 - Dart
Easy Way to do it
DropdownButtonFormField<String>(
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
),
...
)
Solution 13 - Dart
DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Select State"),
),
style: MyStyle().getTextStyle("x1black"),
items: <String>[
'Messaging',
'Chating',
'No Longer Interested',
'Document Request'
].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
Solution 14 - Dart
Underline takes a Widget. Pass it a blank widget, like below.
DropdownButton<T>(
value: value,
underline: SizeBox(), // Empty box will remove underline
)
Solution 15 - Dart
DropdownButtonFormField(
iconSize: 30,
decoration: InputDecoration(enabledBorder: InputBorder.none),
hint: Text(
"Select Duration",
style: TextStyle(fontSize: 20),
),
items: listDrop,
onChanged: (value) {
duration = value;
},
)
Solution 16 - Dart
if you want just disable the border in all the case you can use :
DropdownButtonFormField(
validator: _validator,
decoration: InputDecoration(
border: InputBorder.none,
),
items: [],
onChanged: (value) {}),
),
if you want disable only when there is no error you can use this
Solution 17 - Dart
DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: false,
splashColor: Colors.grey,
child: DropdownButton<String>(
value: _myPargna,
iconSize: 25,
icon: Icon(Icons.arrow_drop_down),
style:
TextStyle(fontSize: 18, color: Color(0xFF1f193d)),
hint: Row(
children: [
SizedBox(width: 11),
Text(
'Select Province',
style: TextStyle(color: Colors.grey),
),
],
),
onChanged: (String newValue) {
setState(() {
_myPargna = newValue;
});
},
items: items.map((String items) {
return DropdownMenuItem(
child: Row(
children: [
SizedBox(width: 12),
Text(
items,
style: TextStyle(color: Colors.black),
),
],
),
value: items,
);
}).toList(),
),
),
),