i’m trying to remove the underline from the selected value in a DropdownButtonFormField, tried different solutions from this thread but none of them gave me the wanted result.
Here is a screenshot from the field:
And here is my code:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
padding: EdgeInsets.only(left: 20),
decoration: BoxDecoration(
color: Colors.grey[200],
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(12)),
child: DropdownButtonHideUnderline(
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent))),
hint: Text('Type d'utilisateur'),
items: types.map(buildMenuItem).toList(),
onChanged: (value) {
setState(() {
type = value!;
});
},
value: type,
isExpanded: true,
iconSize: 26,
icon: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
),
),
),
),
),
2
Answers
You can use
border: InputBorder.none
You just need to change the border type of the
DropDownButtonFormField
fromUnderlineInputBorder
toInputBorder.none