Border radius of selection list of DropdownButtonFormField in flutter

Question

I didn't find how to decorate the list that appears when you click on DropdownButton like make radius for the corners as you see in the screenshot below.

Answer 1

Since flutter 2.11.0-pre the native DropdownButtonFormField comes with borderRadius by default.

DropdownButtonFormField(
  borderRadius: BorderRadius.circular(20.0),
  items: // <your items list>
  value: // your value
  onChanged: (value) {}
)

You could consider updating your flutter version to 2.11.0+, just keep in mind it's still in beta.

Answer 2

Try below code hope its help to you. DropdownButton.

Add borderRadius property to DropdownButton

String dropdownValue = 'One';

your Widget

DropdownButton<String>(
  borderRadius: BorderRadius.circular(10),//change value on your need
  value: dropdownValue,
  icon: const Icon(Icons.arrow_downward),
  elevation: 16,
  style: const TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
),

Your result->