Reputation: 1231
Flutter DropdownButton same color as parent Widgets
I've been working on a toy reminders app and wish to implement a dropdown menu for the user to select a given time interval.
I have the button loaded and can click on it with the correct menu popping up. The problem is the appearance of the button on the screen. It is the same color as the parent Widget and does not display the text of selected item at all.
How can I get the dropdown button to have a white background and black text?
Here is a screenshot:
And here is the code that builds this view:
@override
Widget build(BuildContext context) {
return new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_buildInformationRow(),
_buildReminderRow(),
],
)
)
],
)
);
}
Widget _buildInformationRow() {
return new Container(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
padding: const EdgeInsets.all(10.0),
child: new Text(
"This app can remind you to do stuff\non a regular basis",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
)
],
),
);
}
Widget _buildReminderRow() {
return new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: new Text(
"Remind me",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
),
new Column(
children: <Widget>[
new Container(
child: new DropdownButton<String>(
style: new TextStyle(
color: Colors.black,
fontSize: 18.0,
),
items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
return new DropdownMenuItem <String>(
value: value,
child: new Text(value)
);
}).toList(),
onChanged: null
)
)
],
)
],
),
);
}
Upvotes: 13
Views: 40642
Answers (6)
Reputation: 367
try this, and replace the Container's color in the theme color:
Container(
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
decoration: BoxDecoration(
color: Colors.cyanAccent,
),
child: DropdownButtonHideUnderline(
child: new DropdownButton<String>(
style: new TextStyle(
color: Colors.black,
fontSize: 18.0,
),
items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
return new DropdownMenuItem <String>(
value: value,
child: new Text(value)
);
}).toList(),
onChanged: null
),
),
)
Upvotes: 1
Reputation: 3406
You can do it by
DropdownButtonHideUnderline(
child: Theme(
data: ThemeData(
primaryColor: Colors.white,
),
child: DropdownButton<String>(
isExpanded: true,
value: _selectedMetalColor,
onChanged: (String newValue) {
setState(() {
_selectedMetalColor = newValue;
//dropdownValue = newValue;
});
},
// hint: Text(
// teethMetalColors[0],
// style: TextStyle(
// color: Colors.white,
// ),
// ),
icon: Container(
margin: EdgeInsets.only(right: 12.0),
child: Icon(
// Add this
Icons.keyboard_arrow_down, // Add this
color: Colors.white, // Add this
size: 35.0,
),
),
style: TextStyle(
color: Colors.black, fontSize: 16.0),
selectedItemBuilder:
(BuildContext context) {
return teethMetalColors
.map((String value) {
return Padding(
padding: const EdgeInsets.only(
top: 12.0, left: 16.0),
child: Text(
_selectedMetalColor,
style:
TextStyle(color: Colors.white),
),
);
}).toList();
},
items: teethMetalColors
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
style:
TextStyle(color: Colors.black),
),
),
);
}).toList(),
),
),
)
Upvotes: 2
Reputation: 515
You can use the following code to give your customized color to DropDownButton hint
DropdownButton<String>(
isExpanded: true,
hint: Text('Your hint',style: TextStyle(color: Color(0xFFF5F5F5)),),
icon: Icon(Icons.arrow_downward),
iconSize: 20,
elevation: 12,
style: TextStyle(color: Colors.lightBlue),
underline: Container(
height: 0,
),
items: _currencies
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(fontSize: 14.0, color: Color(0xFFF5F5F5)),
),
);
}).toList(),
onChanged: (String valueSelected) {
onDropDownItemChanged(valueSelected);
},
value: dropdownValue,
//00000value: dropdownValue,
),
Upvotes: 2
Reputation: 151
Use hint instead of value
Example
hint: dropdownValue == null ? Text("Select one", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),
dropdownValue is the value that I selected
Upvotes: 5
Reputation: 169
Theme(
data: new ThemeData(
canvasColor: Colors.red,
primaryColor: Colors.black,
accentColor: Colors.black,
hintColor: Colors.black),
child: DropdownButton(
iconEnabledColor: Colors.white,
style: TextStyle(color: _selectedColor,fontSize: 16),
underline: Text(''),
value: selectedCurrency,
isExpanded: true,
iconSize: 40,
items: currencies.entries
.map<DropdownMenuItem<String>>(
(MapEntry<String, String> e) =>
DropdownMenuItem<String>(
value: e.key,
child: Text(e.value),
))
.toList(),
onChanged: (String newKey) {
setState(() {
_selectedColor = Colors.white;
selectedCurrency = newKey;
});
},
))
Upvotes: 6
Reputation: 420
Have you tried wrapping your Dropdown in a Container with a white color, then just ensure the child on the DropdownButton style attribute has a TextStyle with black color.
new Container(
color: Colors.white,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<T>(
items: dropdownItems,
onChanged: this.onChanged,
value: this.preSelected,
style: new TextStyle(
color: Colors.black,
),
),
)
),
),
Note: I use the ButtonTheme to ensure the dropdown fills the width of the Container.
And you can also wrap the container around a Theme to change the background of the actual dropdown when active and displaying the menu items.
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Theme.of(context).primaryColor
),
child: // Your Dropdown Code Here,
),
Upvotes: 25
Related Questions
- Flutter: How to set different colors for DropdownItems and for DropdownButton selected item?
- Flutter: Change background color of DropDownMenuItems pick list
- How to change the background color in DropDownButton?
- Different style for DropDownButton and DropDownMenuItem
- Can't figure out how to properly style DropdownButton
- Flutter DropdownButtonFormField selected background color
- Flutter Change Dropdown arrow color
- Flutter how to change font color of DropDownButton
- How to change the DropdownButton's icon color? Flutter
- How to set mandatory DropDownButton on Flutter with Colors?