DropdownButton text style doesn't change

Question

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.

Answer 1

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

Answer 2

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.