Different style for DropDownButton and DropDownMenuItem - dart

Question

I am creating below registration form in Flutter.
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,
),
),...

Answer 1

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);

Answer 2

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

Answer 3

Add isExpanded in DropdownButton.
DropdownButton(
isExpanded: true,
)

Answer 4

Checkout DropDownButton2 for easy customized styling
For more examples and to know more about the package follow this link: DropDownButton2