I want to change the TextStyle of the items appear in DropdownSearch which comes under dropdown_search package in flutter

Question

Transform.scale( scale: 0.91, child: DropdownSearch( validator: (v) => v == null ? "required field" : null, hint: "Select a country", dropdownSearchDecoration: InputDecoration(

              //filled: true,
              //fillColor: Theme.of(context).inputDecorationTheme.fillColor,
            ),
            mode: Mode.MENU,
            showSelectedItem: false,
            items: [
              "India",
              "Maldeep",
              "Austria",
              "Phillipins",
              "Itly",
            ],
            
            label: "No of Auto Print",
            
            showClearButton: false,
            
            //onChanged: print,
            //popupItemDisabled: (String s) => s.startsWith('I'),
            selectedItem: "India",


            
            
          ),
        ),

Here I want to change the font family of the items in the dropdown ..also of selectedItem..please assist..also how to change the arrow icon that comes in the dropdown..the process is not available as components..

Answer 1

You can add paramter dropdownBuilder for custom apperience. Here's implementation with horizontal ListView:

  Widget _customDropDown(BuildContext context, List<String> selectedItems) {
    List<Widget> list = [];
    if (selectedItems.isEmpty) return Text('Hint text');
    for (var item in selectedItems) {
      list.add(Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey.shade300),
              borderRadius: BorderRadius.circular(20.0),
              color: Colors.grey.shade300,
            ),
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Center(
                  child: Text(
                item,
              )),
            )),
      ));
    }
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: list.length,
        itemBuilder: (context, index) {
          return list[index];
        });
  }

Answer 2

If you look into the source code of the package, I believe you can not change the textStyle of the text inside dropdown menu.

For arrow icon, DropdownSearch has dropDownButton.

DropdownSearch<String>(
  dropDownButton: Icon(Icons.ac_unit) // icon of your choice
)

Answer 3

I manage to customize the dropdown menu by creating two functions at this builder

    return SizedBox(
            height: 300,
            child: AlertDialog(
            content: DropdownSearch<String>(
            dropdownSearchBaseStyle:
            TextStyle(
            fontFamily: 'MeQuran2'),
            showSearchBox: true,
            mode: Mode.DIALOG,
            showSelectedItems: true,
            dropdownBuilder: _style,
            popupItemBuilder: _style1,
            items: list,
            dropdownSearchDecoration:
            InputDecoration(
            labelText: "Word Detail",
            hintText: "word type detail",
            ),
            onChanged: print,
            selectedItem:
            aya.wordName[index].name,
      ),),);

and this is the two widget with customize textsyle

      Widget _style(BuildContext context, String? selectedItem) {
        return Text(
          selectedItem!,
          style: TextStyle(fontFamily: 'MeQuran2'),
        );
      }

      Widget _style1(BuildContext context, String? item, bool isSelected) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              item!,
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontFamily: 'MeQuran2',
                  color: isSelected ? Colors.cyanAccent : null),
            ),
          ),
        );
      }

Answer 4

For styling the selectedItem, you can use a Custom Widget as mentioned in below code snippet. You can include the FontFamily in the TextStyle property of the widget.

Widget _customDropDownAddress(
  BuildContext context, _addressFilteredName, String itemDesignation) {
return Container(
    child: Text(
  _addressFilteredName.toString(),
  style: TextStyle(
            fontSize: 10,
            color: Colors.green,
         )
)); }

and can use this custom widget as the dropdownBuilder.

DropdownSearch<UserModel>(
            mode: Mode.BOTTOM_SHEET,
            maxHeight: 700,
            isFilteredOnline: true,
            showClearButton: true,
            showSearchBox: true,
            label: 'Address',
            dropdownSearchDecoration: InputDecoration(
              filled: true,
              fillColor: Theme.of(context).inputDecorationTheme.fillColor,
            ),
            onFind: (String filter) => getData(filter),
            onChanged: (data) {
              print(data);
            },
            dropdownBuilder: _customDropDownAddress,
            popupItemBuilder: _customPopupItemBuilderExample,
            popupSafeArea: PopupSafeArea(top: true, bottom: true),
            scrollbarProps: ScrollbarProps(
              isAlwaysShown: true,
              thickness: 7,
            ),
          ),

This will be helpful to add any applicable style to the selectedItem.

Answer 5

I was having the same problem, the package uses the TextStyle from the current theme so you can do something like:

Theme(
  data: ThemeData(
    textTheme: const TextTheme(subtitle1: TextStyle(fontSize: 22))
  ),
  child: DropdownSearch<String>(),
);