How to make rounded border for dropdownbutton in flutter? - drop-down-menu

Question

How to Add Rounded Rectangle Border?
Below Code didn't result in any border on screen.
Container(margin: EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0),
width: double.infinity,
// decoration: ShapeDecoration(
// shape: RoundedRectangleBorder(
// borderRadius:BorderRadius.all(Radius.circular(5.0)),
// ),
child: DropdownButtonHideUnderline(
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0),
child: new DropdownButton<UserTest>(...),
),
),
),

Answer 1

With the form field variant, you can use the OutlineInputBorder InputBorder, used normally for input text fields:
DropdownButtonFormField(
...
decoration: const InputDecoration(
border: OutlineInputBorder(),
),
),
The way the form field does this can be replicated and used with the regular DropdownButton:
InputDecorator(
decoration: const InputDecoration(border: OutlineInputBorder()),
child: DropdownButtonHideUnderline(
child: DropdownButton(
...
),
),
),

Answer 2

You need to specify the side: property. By default it is BorderSide.none.
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),

Answer 3

If what you want is this...
Then here you go
import 'package:flutter/material.dart';
class RoundedBorderDropdown extends StatelessWidget {
final List<String> _dropdownValues = [
"One",
"Two",
"Three",
"Four",
"Five"
]; //The list of values we want on the dropdown
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rounded Border Button in AppBar'),
),
body: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.red, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButton(
items: _dropdownValues
.map((value) => DropdownMenuItem(
child: Text(value),
value: value,
))
.toList(),
onChanged: (String value) {},
isExpanded: false,
value: _dropdownValues.first,
),
),
),
);
}
}
That is courtesy inducesmile
Happy Coding...

Answer 4

Column(
crossAxisAlignment : CrossAxisAlignment.start,
children: <Widget> [
Text('Gender:'),
InputDecorator(
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: const BorderRadius.all(Radius.circular(4.0)),
contentPadding: EdgeInsets.all(10),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: gender,
isDense: true,
isExpanded: true,
items: [
DropdownMenuItem(child: Text("Select Gender"), value: ""),
DropdownMenuItem(child: Text("Male"), value: "Male"),
DropdownMenuItem(child: Text("Female"), value: "Female"),
],
onChanged: (newValue) {
setState(() {
});
},
),
),
),
]
),

Answer 5

You can try with this
Container(
padding: EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueGrey),
borderRadius: BorderRadius.circular(5),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
borderRadius: BorderRadius.circular(12),
isExpanded: true,
items: <String>[
'1 km',
'2 km',
'3 km',
'4 km',
'5 km'
].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
hint:
ourtext("Select area", fontSize: 14),
onChanged: (_) {},
),
),
),

Answer 6

Container(width: 200.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(color: Colors.blueGrey)),
child: DropdownButton<String>(
hint: Text("Messaging"),
items: <String>['Messaging', 'Chating', 'No Longer Interested', 'Document Request'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
)

Answer 7

Wrap it in a Material and remove DropDown borders
Material(
borderRadius: BorderRadius.circular(40),
child: SizedBox(
width: MediaQuery.of(context).size.width / 1.08,
child: DropdownButton(
style: style.copyWith(color: Colors.black),
isExpanded: true,
underline: DropdownButtonHideUnderline(child: Container()),
value: value,
items: ...
),
)

Answer 8

In case you want to make rounded corners for the menu itself, just add borderRadius properties in DropdownButton:
DropdownButton(
borderRadius:BorderRadius.circular(12),
items: ...
)

Answer 9

String selectedValue
String selected value;
Widget createRoundedDropDown (){
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
borderRadius: BorderRadius.circular(10),
style: TextStyle(color: Colors.black,fontSize: 14,),
hint: Text("hint text"),
value: selectedValue,
isDense: true,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
items: listItems.map((document) {
return DropdownMenuItem<String>(
value: document.name,
child: FittedBox(fit:BoxFit.fitWidth,
child: Text(document.name,
style:TextStyle(fontSize: 16))),
);
}).toList(),
),
),
),
);}