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,
),
),...
To change the dropdown Button color in Flutter, simply wrap your DropdownButton widget inside the Container and provide the styling instructions inside the decoration property using the BoxDecoration widget. Using the color property (insideBoxDecoration) you can assign the color.
Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
Option 1: Set DropDown. dart selectedItemOffset to -40 in then DropDownItems will always opens below the DropdownButton .
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);
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With