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"),
),
],
),
73294 次浏览
小开
最佳答案

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>>[
....
小开

Just wrap DropdownButton inside DropdownButtonHideUnderline like this :

new DropdownButtonHideUnderline(
child: DropdownButton()
)
小开 
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: (_) {},
),


),
小开

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))
),
),
...
小开

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( icon: Icon(Icons.more_vert), isExpanded: true, value: dropValue, underline: widget or SizedBox(),

小开

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

...


DropdownButton(
underline: SizedBox(),


...
小开

Underline takes a Widget. Pass it a blank widget, like below.

DropdownButton<T>(
value: value,
underline: SizeBox(), // Empty box will remove underline
)
小开

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.

小开

Add underline: Container() to your settings like this:

SizedBox(
...
underline: Container(),
),
小开

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>(
......
),
),
小开 
DropdownButtonFormField(
iconSize: 30,
decoration: InputDecoration(enabledBorder: InputBorder.none),
hint: Text(
"Select Duration",
style: TextStyle(fontSize: 20),
),
items: listDrop,
onChanged: (value) {
duration = value;
},
)
小开

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

小开

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),
),
),
小开

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(),
)
小开

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,)
小开

Easy Way to do it

DropdownButtonFormField<String>(
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
),
...
)
小开 
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(),
),
),
),
小开

You can just Do this

decoration: const InputDecoration(
// enabledBorder: InputBorder.none,
// disabledBorder: InputBorder.none,
// focusedBorder: InputBorder.none,
// errorBorder: InputBorder.none,
border: InputBorder.none,
),
小开

You could try the following code:

decoration: InputDecoration(
border: InputBorder.none,
)

To disable every border on the width, set InputBorder.none for border attribute. Or if you prefer to disable only the border when dropdown is enable, set for enabledBorder.

小开 
decoration: InputDecoration(
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(2.0),
borderSide: BorderSide(color: kLightBlackColor)),
),
小开

This worked for me

DropdownButtonFormField<String>(decoration: InputDecoration(border: InputBorder.none),)

提交答案