Search code examples
flutterdartfontsdropdownresponsive

DropdownSearch Flutter - Font too big


I have the following code for the dropdownSearch in Flutter However, the font is fixed and does not change when I change the screen size

enter image description here

DropdownSearch<String>(
        items: items,
        showSearchBox: showSearchBox ?? false,
        dropdownSearchDecoration: InputDecoration(
          contentPadding: const EdgeInsets.only(right: 8.0, left: 8.0),
          floatingLabelStyle:
              kResponsiveTextUbuntuFont(context, kDarkGreyColor),
          labelText: labelTxt,
          labelStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: kDarkGreyColor, width: 2),
          ),
          border: const OutlineInputBorder(
            borderSide: BorderSide(color: kDarkGreyColor, width: 2),
          ),
        ),
        onChanged: (newItem) => {},
        showSelectedItems: true,
        selectedItem: selectedItem,
        popupBackgroundColor: kBackgroundColor,
        dropdownSearchBaseStyle:
            kResponsiveTextUbuntuFont(context, kDarkGreyColor),
        mode: Mode.MENU,
      ),

Font:

TextStyle KResponsiveTitleUbuntuFont(BuildContext context, Color color) {
  return TextStyle(
      fontFamily: 'Ubuntu',
      fontSize:
          (setWidth(context, 0.001) >= 1) ? 30 * setWidth(context, 0.001) : 50,
      fontWeight: FontWeight.w100,
      wordSpacing: 5,
      color: color);
}

Solution

  • I always find the solution directly after asking my own question xD... Here's the solution:

      Widget _customDropDownText(BuildContext context, String? name) {
        return Container(
          child: Text(
            name.toString(),
            style: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
          ),
        );
      }
    

    Build:

    @override
      Widget build(BuildContext context) {
    .
    .
    .
    DropdownSearch<String>(
            items: widget.items,
            dropdownBuilder: _customDropDownText,
            showSearchBox: widget.showSearchBox ?? false,
    .
    .
    .
    }
    

    solution