I am creating below registration form in Flutter.

enter image description here

TextStyle white =
    new TextStyle(color: Colors.white, decorationColor: Colors.white);
TextStyle grey =
    new TextStyle(color: Colors.grey, decorationColor: Colors.white);

I want to apply white style to DropDownButton and grey to DropDownMenuItem. But, the style of DropDownMenu item is also applied to DDButton.

Also, can I "match_parent" the width of DropDownButton like TextField (as in image)?

Here is the code:

     child: new Center(
      child: new ListView(
        shrinkWrap: true,
        padding: new EdgeInsets.only(left: 24.0, right: 24.0),
        children: <Widget>[
          new ListTile(
            leading: const Icon(
              Icons.language,
              color: Colors.white,
            ),
            title: new DropdownButton(
              items:
                  <String>['India', 'Australia', 'USA'].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value, ),
                );
              }).toList(),
              value: selected,
              onChanged: (String value) {
                setState(() {
                  selected = value;
                });
              },
              style: white,
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.smartphone, color: Colors.white),
            title: new TextField(
              decoration: new InputDecoration(
                  hintText: "Phone Number", hintStyle: white),
              keyboardType: TextInputType.phone,
              style: white,
            ),
          ),...


Solution 1: Luis Galvez

There is the final bool inherit property at the TextStyle Class, you can try something like this:

TextStyle white =
new TextStyle(inherit: false, color: Colors.white, decorationColor: Colors.white);


Solution 2: Erasmo Junior

Add isExpanded in DropdownButton.

DropdownButton( isExpanded: true, )


Solution 3: Mahesh Jamdade

You can do that using selectedItemBuilder property of the dropdown the issue as of now with that is you cannot use a hintText and selectedItemBuilder together. you can track the open issue here.

But Theres a temporary workaround for this is to use one of them based on the selected dropdownValue

   DropdownButton<String>(
              value: dropdownValue,
              style: TextStyle(color: Colors.grey, fontSize: 15),
              hint: dropdownValue != null
                  ? null
                  : Text(
                      'Select Value',
                      style: TextStyle(color: Colors.black),
                    ),
              onChanged: (value) => setState(() => dropdownValue = value),
              selectedItemBuilder: dropdownValue == null
                  ? null
                  : (BuildContext context) {
                      return ['ONE', 'TWO.', 'THREE'].map((String value) {
                        return Text(
                          dropdownValue,
                          style: TextStyle(color: Colors.green),
                        );
                      }).toList();
                    },
              items: ['ONE', 'TWO.', 'THREE']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value,
                      style: TextStyle(inherit: false, color: Colors.red)),
                );
              }).toList(),
            ),

you can find a dartpad example here


Solution 4: Krishna Acharya

Checkout DropDownButton2 for easy customized styling

enter image description here

For more examples and to know more about the package follow this link: DropDownButton2