Add-Customize Dropdown(DropdownButtonFormField) Border in Flutter [2023]

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:

1. Replace the DropdownButton widget with the DropdownButtonFormField.
2. Inside the DropdownButtonFormField widget, add the decoration parameter and assign the InputDecoration widget.
3. Inside the InputDecoration widget, add the enabledBorder and focusedBorder parameters and assign the OutlineInputBorder widget.
4. Inside the OutlineInputBorder, add the BorderSide widget with width and color 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:

1. Replace the DropdownButton widget with the DropdownButtonFormField.
2. Inside the DropdownButtonFormField widget, add the decoration parameter and assign the InputDecoration widget.
3. Inside the InputDecoration widget, add the enabledBorder and focusedBorder parameters and assign the OutlineInputBorder widget.
4. Inside the OutlineInputBorder, add the BorderSide widget with color 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?