How to make rounded border for dropdownbutton in flutter?

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>(...),
                           ),
                          ),
                   ),

You can try wrap your widget in `ClipRRect` – Andrii Turkovskyi Nov 05 '18 at 08:00 — Andrii Turkovskyi, Nov 05 '18 at 08:00

hacker1024 · Answer 1 · 2021-07-22T13:04:27.140

79

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(
      ...
    ),
  ),
),

edited Jul 22 '21 at 13:04

answered Jun 03 '20 at 07:03

hacker1024

3,186
1
11
31

I like this answer because it uses DropdownButtonFormField that has a labelText prop, this will keep the input label visible after selecting some value and this is fundamental from a UX perspective. – Nick Jun 23 '20 at 19:14
1

floatingLabelBehavior doesn't behave properly with the input decorator. Do you know why? – Bagus Aji Santoso Aug 23 '20 at 13:38
I'm not sure - maybe check for differences with the form field implementation? – hacker1024 Aug 25 '20 at 01:23

score 34 · Accepted Answer · answered Nov 05 '18 at 09:20

34

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

answered Nov 05 '18 at 09:20

chemamolins

19,400
5
54
47

6

What if we want to round the opened list window that holds the DropDownButtonItem's ? – aytunch Feb 08 '19 at 17:49
@aytunch did you find the solution for your query? – Chirag Mittal Jan 17 '20 at 11:08
@ChiragMittal Unfortunately not:( – aytunch Jan 19 '20 at 22:22
1

@aytunch That is not possible. You would have to build your own version of `DropDownButton`. Have a look to the widget source code. The `_DropdownRoute` in the source is not reachable. – chemamolins Jan 21 '20 at 16:03
1

If you want to remove the underline of the dropdown field, just wrap the DropDownButton in a "DropdownButtonHideUnderline" widget. – Jeff S. Jan 30 '20 at 20:47

score 16 · Answer 3 · edited Feb 02 '22 at 21:10

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...

also add `underline: SizedBox.shrink()` to the `DropdownButton` to remove the underline. — Tushar Sadhwani, Aug 11 '20 at 11:58

score 16 · Answer 4 · edited Dec 16 '21 at 08:57

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(() {
                        });
                    },
                ),
            ),
        ),
    ]
),

But the background color when chose an item has not full width and height. — e-info128, Sep 25 '22 at 04:24

score 2 · Answer 5 · answered Nov 17 '22 at 21:01

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: (_) {},
                                    ),
                                  ),
                                ),

score 1 · Answer 6 · answered May 22 '19 at 17:46

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: (_) {},
                      ),
                      )

score 0 · Answer 7 · answered Dec 29 '20 at 14:28

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: ...
   
    ),
  )

score 0 · Answer 8 · edited Jun 07 '22 at 19:20

0

In case you want to make rounded corners for the menu itself, just add borderRadius properties in DropdownButton:

DropdownButton(
  borderRadius:BorderRadius.circular(12),
  items: ...
)

edited Jun 07 '22 at 19:20

Tyler2P

2,324
26
22
31

answered Jun 07 '22 at 14:54

Vadym Silchenko

53
6

score 0 · Answer 9 · answered Dec 23 '22 at 13:09

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(),
      ),
    ),
  ),
);}

How to make rounded border for dropdownbutton in flutter?

9 Answers9

Linked