How to change the DropdownButton's icon color? Flutter

You can use the fields iconEnabledColor and iconDisabledColor in the following manner:

final myDropDownMenu = DropdownButton<String>(
      iconEnabledColor: Colors.white,
      iconDisabledColor: Colors.white,
      value: myInitialValue,
      // The rest of your code
);

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.

Theme(
   data: Theme.of(context).copyWith(brightness: Brightness.dark),
   child: DropdownButton(
     style: TextStyle(color: Colors.white, decorationColor: Colors.white),
     items: this.items,
     value: null,
     hint: Text(SaveOptions[_saveOption], style: TextStyle(color: Colors.white)),
     onChanged: (selectedOption) {
       setState(() {
         _saveOption = selectedOption;
       });
     },
   ),
 )

This is a bit of a hack but it gives you complete control over how the drop down looks collapsed, in short make value: null, hint: null, iconsize: null, make a stack that has 2 containers with same sizing: 1 that displays your collapsed dropdown and 1 that detects gestures 'expand'.

class MyDropdownFilled extends StatefulWidget {
  final List<String> dropDownValues;

  const MyDropdownFilled({Key key, @required this.dropDownValues})
      : super(key: key);

  List<DropdownMenuItem<String>> getDropDownMenuItems() {
    return dropDownValues
        .map((itemString) =>
            DropdownMenuItem(child: Text(itemString), value: itemString))
        .toList();
  }

  @override
  _MyDropdownFilledState createState() => _MyDropdownFilledState();
}

class _MyDropdownFilledState extends State<MyDropdownFilled> {
  String _activeDropdown;

  @override
  initState() {
    super.initState();
    _activeDropdown = widget.dropDownValues[0];
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: double.infinity,
          padding: EdgeInsets.all(10.0),
          decoration: BoxDecoration(
              color: primaryColor.shade600,
              borderRadius: BorderRadius.all(Radius.circular(2))),
          child:
              Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text(_activeDropdown, style: Theme.of(context).textTheme.caption),
            Icon(Icons.arrow_drop_down, size: 30, color: Colors.white),
          ]),
        ),
        Container(
          width: double.infinity,
          padding: EdgeInsets.all(10.0),
          decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.all(Radius.circular(2))),
          child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
            value: null,
            isDense: true,
            iconSize: 0,
            hint: null,
            onChanged: (String newValue) {
              setState(() {
                _activeDropdown = newValue;
              });
            },
            items: widget.dropDownValues.map((String value) {
              return DropdownMenuItem(
                value: value,
                child: Text(value),
              );
            }).toList(),
          )),
        )
      ],
    );
  }
}

Currently the arrow color is hardcoded for DropdownButton:

  Color get _downArrowColor {
    // These colors are not defined in the Material Design spec.
    if (_enabled) {
      if (Theme.of(context).brightness == Brightness.light) {
        return Colors.grey.shade700;
      } else {
        return Colors.white70;
      }
    } else {
      if (Theme.of(context).brightness == Brightness.light) {
        return Colors.grey.shade400;
      } else {
        return Colors.white10;
      }
    }
  }

You can create your own widget to customize this property.

It seems Flutter should have a way to do this, but I don't think it's currently possible. What I did to handle this was to set the "value" to null, "iconSize" to 0, and have the "hint" dynamically generated based on what is selected. Doing this lets you have complete control over hint widget.

DropdownButton<int>(
  value: null,
  iconSize: 0,
  hint: Row(
    children: <Widget>[
      Text(_selected,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w700,
        ),
      ),
      Padding(
        padding: EdgeInsets.only(left: 5),
        child: Icon(
          FontAwesomeIcons.caretDown,
          color: Colors.white,
          size: 20,
        ),
      ),
    ],
  ),
  items: dateRanges.map((Map<String, dynamic> value) {
    return DropdownMenuItem<int>(
      value: value['type'],
      child: Text(
        value['name'],
        style: TextStyle(
          color: Colors.grey[800],
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }).toList(),
  onChanged: (type) => _onDateRangeTypeChanged(type),
)

Hope this helps.

Go to DropdownButton class Edit this code

if (!DropdownButtonHideUnderline.at(context)) {
      final double bottom = widget.isDense ? 0.0 : 8.0;
      result = Stack(
        children: <Widget>[
          result,
          Positioned(
            left: 0.0,
            right: 0.0,
            bottom: bottom,
            child: Container(
              height: 1.0,
              decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(color: Color(0xFFBDBDBD), width: 0.0))
              ),
            ),
          ),
        ],
      );
    }

to this

if (!DropdownButtonHideUnderline.at(context)) {
      final double bottom = widget.isDense ? 0.0 : 8.0;
      result = Stack(
        children: <Widget>[
          result,
          Positioned(
            left: 0.0,
            right: 0.0,
            bottom: bottom,
            child: Container(
              height: 1.0,
              decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(color: Colors.red

("Here any color you want")

, width: 0.0))
                  ),
                ),
              ),
            ],
          );
        }

Wrap your widget around a new Theme that has the values you want set, given that you can go to the source code and see which colors it's using off the theme.