Reputation: 89
Is there a way to change the input color of a DropdownSearch widget? The default color is black but I want to change it to grey. I have tried labelStyle: TextStyle(color: Colors.white) but it does not work.
This is my DropdownSearch Widget
Container(
child: DropdownSearch<String>(
mode: Mode.BOTTOM_SHEET,
showSearchBox: true,
dropdownSearchDecoration: new InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
prefixIcon: const Icon(
Icons.corporate_fare,
color: Colors.white,
),
),
showAsSuffixIcons: true,
showClearButton: false,
dropdownButtonBuilder: (_) => Padding(
padding: const EdgeInsets.all(8.0),
child: const Icon(
Icons.arrow_drop_down,
size: 24,
color: Colors.grey,
),
),
showSelectedItem: true,
items: _industry,
onChanged: (String newValue) {
setState(() {
dropDownValue = newValue;
});
},
selectedItem: dropDownValue,
),
),
Upvotes: 8
Views: 4654
Reputation: 114
I've found for dropdown_search 5.0.6 using the themeData method by s_erfani doesn't change the text colour of the search box field. I got it to work instead using the baseStyle property of dropdownDecoratorProps:
DropdownSearch<MedicineModel>(
onChanged: (MedicineModel? newValue) {
setState(() {
medicine = newValue;
});
},
asyncItems: (String? filter) => getData(filter),
popupProps: PopupPropsMultiSelection.modalBottomSheet(
showSelectedItems: true,
itemBuilder: _customPopupItemBuilderExample2,
showSearchBox: true,
),
compareFn: (item, sItem) => item.id == sItem.id,
dropdownDecoratorProps: DropDownDecoratorProps(
baseStyle: TextStyle(color:Colors.white),
)
)
Upvotes: 2
Reputation: 494
there are 2 options: first, you can wrap it with Theme widget:
Theme(
data: ThemeData(
textTheme: TextTheme(subtitle1: TextStyle(color: Colors.green)),
),
child: DropdownSearch<String>(
mode: Mode.BOTTOM_SHEET,
showSearchBox: true,
dropdownSearchDecoration: new InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
...
or you can change it from the library. go to selectDialog.dart. line 349 is the search box. add color to textField:
...
TextField(
style: TextStyle(color: Colors.red),
controller: widget.searchBoxController,
focusNode: focusNode,
onChanged: (f) => _debouncer(() {
_onTextChanged(f);
}),
...
you have to stop and restart the app to makes it work.
Upvotes: 7