DropdownFlutterWidgets

Two ways to change Dropdown arrow color in Flutter

Changing the dropdown arrow color in Flutter can be necessary for various reasons, such as enhancing the overall user interface (UI) design, improving visibility, or ensuring consistency with the app’s color scheme. Customising the appearance of UI elements like dropdown arrows allows developers to create a more cohesive and visually appealing user experience. In this tutorial we will learn the 2 ways by which we can change color.

Method 1 : Icon Property

We can change arrow color of dropdown button by using icon property.

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

Method 2 : IconEnabledColor Property

Color of arrow can also be changed using iconEnabledColor property of DropdownButton class.

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

You can also read how to set hint of Dropdown Button in Flutter.

Leave a Reply

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