skip to Main Content

I’m trying to use Montserrat with a custom color on my DropdownButton but for some reason, the TextStyle is not being applied.

Here is my code:

DropdownButton(
  value: value,
  dropdownColor: colorScheme.surface,
  hint: hint != null
      ? Text(
          hint,
          style: GoogleFonts.montserrat(
            fontSize: 18,
            color: colorScheme.onPrimary,
          ),
        )
      : null,
  style: GoogleFonts.montserrat(
    fontSize: 18,
    color: colorScheme.onPrimary,
  ),
  iconEnabledColor: colorScheme.onPrimary,
  items: items
      .map((e) => DropdownMenuItem(
            alignment: Alignment.center,
            value: e,
            child: Text(
              e,
              style: GoogleFonts.montserrat(
                fontSize: 18,
                color: colorScheme.onSurface,
              ),
            ),
          ))
      .toList(),
  onChanged: onChanged,
);

I can’t find where or how it’s wrong.

2

Answers


  1. Chosen as BEST ANSWER

    Reading the documentation found what actually works:

    selectedItemBuilder: (BuildContext context) {
              return items.map((String value) {
                return Align(
                  alignment: Alignment.center,
                  child: Text(
                    value,
                    style: GoogleFonts.montserrat(
                        fontSize: 18, color: colorScheme.onPrimary),
                  ),
                );
              }).toList();
            },
    

    This atribute did the trick.


  2. Style’s property on dropdown are quite tricky as you have several style possible (dropdown itself, dropdown items, hint…). Basically on your question’s code sample, you only apply style to items in the dropdown, the field’s hint and eventually some decoration based on main "style" property.

    seletectedItemBuilder is indeed the thing you’re looking for as it will stylish (or customize the display) of the item shown when users have selected a value in the list 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search