flutter dropdownbutton box around button

How to Customize Flutter Dropdown Button using DropDownButtonFormField?

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:

add dropdown button in flutter

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(),
),
add border to dropdown button

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

flutter dropdown button rounder border

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

change dropdown border width

And to change the color of dropdown list, use the following command.

dropdownColor: Colors.greenAccent,

It will look something like this. 

change dropdown list color

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,
change dropdown button background color

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),
dropdownbuttonformfield remove underline

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Share Post On

Haroon Ashraf

Flutter Developer

Detail-oriented full-stack engineer with 9+ years of industry experience. He’s been working on Flutter since 2018 and has delivered 30+ successful projects.He has experience in project management Trello, Github, Jira…..

Flutter
Xcode
IOS-Swift
Full Stack
Bloc/Cubit
Nodejs

Experience

Availability

9 years

Full-Time

Translate »