Favas Kv
Favas Kv

Reputation: 3079

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.

Upvotes: 9

Views: 11287

Answers (2)

Favas Kv
Favas Kv

Reputation: 3079

Thanks to @anmol.majhail, anyway found something simpler using iconEnabledColor property.

               DropdownButtonHideUnderline (
          child: DropdownButton<String>(

            iconEnabledColor: Colors.indigo, // game changer

            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(),
          ),
        ),

enter image description here

Upvotes: 5

anmol.majhail
anmol.majhail

Reputation: 51206

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(),
            ),
          ),

Upvotes: 30

Related Questions