CODEWITHSUNDEEP
flutterdrop-down-menuiconsproceduretextstyle
Subhasis Banerjee
Subhasis Banerjee

Reputation: 109

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

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

Upvotes: 4

Views: 4883

Answers (5)

Milton Bueno
Milton Bueno

Reputation: 21

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

Upvotes: 1

Hakimi Md Noor
Hakimi Md Noor

Reputation: 21

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

Upvotes: 2

danPyk
danPyk

Reputation: 671

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

Upvotes: 1

Janis
Janis

Reputation: 109

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.

Upvotes: 4

Dung Ngo
Dung Ngo

Reputation: 1472

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
)

Upvotes: 1

Related Questions