user15602150
user15602150

Reputation: 89

Change input text color on DropdownSearch

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

Answers (2)

Forth Temple
Forth Temple

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

s_erfani
s_erfani

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

Related Questions