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

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 2

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),
            ),
          ),
        );
      }