The Dropdown widget in Flutter is one of the most used widgets. It allows users to select an item from the list of options—for example, gender selection. And the DropdownButtonFormField widget is a convenience widget that wraps the Dropdown widget and allows you to change the visual aesthetic and add validations on the dropdown button. So in this tutorial, we will see how to add and customize the Dropdown or DropdownButtonFormField border in Flutter.
Here are different versions of the Dropdown(DropdownButtonFormField) border:

Here’s what we’ll cover:
- Adding Dropdown(DropdownButtonFormField) border
- Add border radius / rounded border to Dropdown(DropdownButtonFormField)
- Changing Dropdown(DropdownButtonFormField) border color
Adding Dropdown(DropdownButtonFormField) border
To add a border to the dropdown button, if you use the DropdownButton widget, replace it with the DropdownButtonFormField. Inside the DropdownButtonFormField widget, you can specify the decoration property and then use the InputDecoration and OutlineInputBorder widget. The OutlineInputBorder widget has the borderSide widget, which you can use to pass in the BorderSide widget with a width parameter to create the border.
Steps to add Dropdown(DropdownButtonFormField) border in Flutter:
- Replace the
DropdownButton
widget with theDropdownButtonFormField
. - Inside the
DropdownButtonFormField
widget, add thedecoration
parameter and assign theInputDecoration
widget. - Inside the
InputDecoration
widget, add theenabledBorder
andfocusedBorder
parameters and assign theOutlineInputBorder
widget. - Inside the
OutlineInputBorder
, add theBorderSide
widget withwidth
andcolor
parameter and set the color of your choice.
Code Example
String dropdownValue = 'Dog'; DropdownButtonFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( //<-- SEE HERE borderSide: BorderSide(color: Colors.black, width: 2), ), focusedBorder: OutlineInputBorder( //<-- SEE HERE borderSide: BorderSide(color: Colors.black, width: 2), ), filled: true, fillColor: Colors.greenAccent, ), dropdownColor: Colors.greenAccent, value: dropdownValue, onChanged: (String? newValue) { setState(() { dropdownValue = newValue!; }); }, items: <String>['Dog', 'Cat', 'Tiger', 'Lion'].map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text( value, style: TextStyle(fontSize: 20), ), ); }).toList(), )
Output

Add border radius / rounded border to Dropdown(DropdownButtonFormField)
To add a border radius or create a rounded border around the Dropdown(DropdownButtonFormField) widget, first, If you are using the DropdownButton widget, replace it with the DropdownButtonFormField. Add the decoration property and then use the OutlineInputBorder widget. The OutlineInputBorder widget accepts the borderRadius parameter. You can use the borderRadius parameter with BorderRadius.circular(50.0) to create the circular border around the TextField.
Code Example
String dropdownValue = 'Dog'; DropdownButtonFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( //<-- SEE HERE borderSide: BorderSide(color: Colors.black, width: 2), ), focusedBorder: OutlineInputBorder( //<-- SEE HERE borderSide: BorderSide(color: Colors.black, width: 2), ), filled: true, fillColor: Colors.greenAccent, ), dropdownColor: Colors.greenAccent, value: dropdownValue, onChanged: (String? newValue) { setState(() { dropdownValue = newValue!; }); }, items: <String>['Dog', 'Cat', 'Tiger', 'Lion'].map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text( value, style: TextStyle(fontSize: 20), ), ); }).toList(), )
Output

Changing Dropdown(DropdownButtonFormField) border color
To change Dropdown(DropdownButtonFormField) border color:
- Replace the
DropdownButton
widget with theDropdownButtonFormField
. - Inside the
DropdownButtonFormField
widget, add thedecoration
parameter and assign theInputDecoration
widget. - Inside the
InputDecoration
widget, add theenabledBorder
andfocusedBorder
parameters and assign theOutlineInputBorder
widget. - Inside the
OutlineInputBorder
, add theBorderSide
widget withcolor
parameter and set the color of your choice.
Code Example
String dropdownValue = 'Dog'; DropdownButtonFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.amberAccent, width: 2), //<-- SEE HERE ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.amberAccent, width: 2), //<-- SEE HERE ), filled: true, fillColor: Colors.greenAccent, ), dropdownColor: Colors.greenAccent, value: dropdownValue, onChanged: (String? newValue) { setState(() { dropdownValue = newValue!; }); }, items: <String>['Dog', 'Cat', 'Tiger', 'Lion'].map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text( value, style: TextStyle(fontSize: 20), ), ); }).toList(), )
Output

Conclusion
In this tutorial, we learned how to change the Dropdown(DropdownButtonFormField) border color in Flutter with practical examples; we first saw how to add a border, change border radius, and finally learned how to change the border color. We hope this helps 😃
Would you like to check other interesting Flutter tutorials?