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..

Solution 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];
        });
  }

Solution 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
)

Solution 3

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.

Solution 4

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

View more solutions

Comments

[Tucker]

You may need to edit this, your code is not all contained.

[Subhasis Banerjee]

items: _itemValues.map((String dropDownStringItem) { return DropdownMenuItem<String>( value: dropDownStringItem, child: Text(dropDownStringItem), ); }).toList(),............It is how Item TextStyle can be changed in DropDownButton...But I Cann't implemnt it here

[Dung Ngo]

yes, because this package doesn't implements DropdownButton(). The author created their own dropdown widget. And as I said, when I looked into the source code, I believe that unless you modify this package, you won't be able to change the TextStyle of items in the dropdown

[Subhasis Banerjee]

please let me know if it is possible to start the DropDown to appear from below the text in DropdownButton!!!!

[Dung Ngo]

you should make other questions and if someone know, they can answer them for you