The Flutter DropDownButton widget is one of the most useful widgets when building apps with Flutter. It gives you an ability to choose from multiple options available inside a button. This option is much useful when creating apps which require users to choose an option from multiple options. An example would be to choose the gender, which most of the apps require. You can customize dropdown button in Flutter using DropDownButtonFormField and its multiple properties.
In this blog, we will be discussing everything about customizing DropDownButton in Flutter.
Using DropDownButton widget, we can change the border radius, color, width and much more. But for that, we will need to create separate containers as well. So, we use DropDownButtonFormField instead which already has the ‘decoration’ property.
Let’s see how to add dropdown button in Flutter.
How to Add DropDown Button in Flutter Using DropDownButtonFormField?
To add dropdown button in a Flutter app, we can use DropDown widget. But this won’t allow us to customize the DropDown button and we will need to create a container to do that. So, we use DropDownButtonFormField class. It wraps the DropDownButton widget in a FormField and requires the items property to be defined in its constructor to perform several customizations. We will be doing that afterwards.
Related post: How to implement a dropdown list in flutter?
Let us first get to know how to add DropDownButton in Flutter using DropDownButtonFormField.
Here is the code to the add dropdownbutton.
Code Example
String? dropdownValue;
DropdownButtonFormField<String>(
hint: const Text('Select your favourite fruit'),
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Apple', 'Mango', 'Banana', 'Peach']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
Result:
You have seen how we added dropdown button using DropDownButtonFormField. We will be doing different customizations to the dropdown button with code example and the results. So you can have a clear picture of how to make changes to dropdown button in Flutter.
Ready? Let’s customize.
How to Add border radius OR rounded border to DropdownButton in Flutter?
To add border to dropDownButtonFormField, we use decoration property that is already present in the DropDownButtonFormField.
See here:
decoration: const InputDecoration(
border: OutlineInputBorder(),
),
Now let’s see how can you change the dropdownbutton radius to make a rounded border.
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
),
),
Result
Change Border Color of Dropdown Button
If you want to assign a specific color OR change the width of the dropdown button, here is how you do it.
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: const BorderSide(color: Colors.black,width: 2),
), focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: const BorderSide(color: Colors.red,width: 3),
),
),
Result
And to change the color of dropdown list, use the following command.
dropdownColor: Colors.greenAccent,It will look something like this.
Change Dropdown Button Background Color
If you want to change dropdown button background color, use fillColor property for that.
Here is how you do it:
fillColor: Colors.yellow,
filled: true,
Change Dropdown Button Arrow Size and Color
Now, if you want to change the dropdown button size, its icon, or color, use the icon class for that. Here is the sample code for that.
icon: const Icon(Icons.keyboard_arrow_down_rounded),
iconSize: 40,
iconDisabledColor: Colors.blue,
iconEnabledColor: Colors.pink,
If you want to remove the border of dropdown button in Flutter, use decoration class and declare border as InputBorder.none.
See here:
decoration: const InputDecoration(border: InputBorder.none),
The Final Form
As you have seen a lot of customizations that we did with the dropdown button. Let us see the final form of dropdown button having different customizations in the code.
The Final Code
DropdownButtonFormField<String>(
icon: const Icon(Icons.keyboard_arrow_down_rounded),
iconSize: 40,
iconDisabledColor: Colors.blue,
iconEnabledColor: Colors.pink,
decoration: InputDecoration(
fillColor: Colors.yellow,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: const BorderSide(
color: Colors.black,
width: 2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: const BorderSide(
color: Colors.red,
width: 3,
),
),
),
hint: const Text('Select your favourite fruit'),
dropdownColor: Colors.greenAccent,
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Apple', 'Mango', 'Banana', 'Peach']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
),
);
}).toList(),
),
Final Result
Conclusion
In this blog, we covered everything related to customizing a dropdown button in Flutter. We hope that you get to learn so much out of this.
Flutter comes with a lot widgets that collectively makes it a perfect framework for developers to build a interactive apps. Several takeaways contribute to develop a successful end product. This include product ideation, designing, wireframming, development, marketing, and what not. So. we need to consider all of them in order to build a product that excels the online marketplace at its best.
Finally, it’s a wrap to the quick guide on how to add and customize the dropdown button in Flutter using DropDownButtonFormField. We have provided the source code for each of the customizations we did. Use them to practice, practice and practice. If you come across any hurdles, feel free to reach out to us. Our Flutter app development company has cooperative and dedicated Flutter developers that are always there to help Flutter aspirants.
