Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Change Dropdown arrow color

How to change Dropdown arrow color?

Here is what I want:

enter image description here

This is what I get

enter image description here

My widget:

            DropdownButtonHideUnderline (
          child: DropdownButton<String>(
            isExpanded: true,
            value: dropdownValue,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            })
                .toList(),
          ),
        ),

I tried wrapping with Theme and changing Brightness, but it changes arrow from White to Black only. I want to use some other color.

like image 622
Favas Kv Avatar asked Jun 18 '19 11:06

Favas Kv


People also ask

How do I change the color of my dropdown icon?

Since the DropdownButton gets the color from the nearest Theme , you have two options. The first one is by changing the brightness of the application theme. And the other is by wrapping your dropdown button with a new Theme with dark brightness . Save this answer.

How do you get rid of the dropdown arrow in flutter?

The best way is to defined an empty Widget as icon. An empty Widget can be set with SizedBox. shrink() , so you need to add icon: SizedBox. shrink(), to your DropdownButton parameters.

How do you add an icon to a dropdown in flutter?

Use DropdownButtonFormField as it has decoration property. You can use prefixIcon attribute to set icon on left side. Save this answer.


1 Answers

This can be done with icon: property in DropdownButton

DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              isExpanded: true,
              value: dropdownValue,
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              hint: Text('Select'),
              icon: Icon(                // Add this
                Icons.arrow_drop_down,  // Add this
                color: Colors.blue,   // Add this
              ),
              items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),
like image 68
anmol.majhail Avatar answered Oct 01 '22 03:10

anmol.majhail