Flutter InputDecoration floatingLabelStyle font family-CodePudding

Is there a way to change font family of a TextField, but keep default input decoration style?

I set style for TextFormField, but it also changed font family of floating label. So I need to reset it to default value.

If I use floatingLabelStyle, it will also change color and animation while the field become in focus.

title: TextFormField(
  style: GoogleFonts.jetBrainsMono(),
  decoration: const InputDecoration(
    labelText: 'Password',
  ),
),

CodePudding user response：

Unfortunately for you, Flutter uses the style set for TextFormField as a base style for the inputDecoration as well, check docs and source code, but the point is:

This text style is also used as the base style for the decoration.

It means that if you set some special properties in the style of TextFormField, you have to repeat and override them in labelStyle and floatingLabelStyle as well.

Check the following example:

TextFormField(
  style: const TextStyle(color: Colors.red, fontSize: 32),
  decoration: const InputDecoration(
    labelText: 'Password',
    floatingLabelStyle:
        TextStyle(color: Colors.blue, fontSize: 16),
    labelStyle: TextStyle(color: Colors.green, fontSize: 8),
  ),
)

Now it you remove fontSize from label styles, you will see that these will still be affected by the fontSize defined in style (bigger, but not exactly the same size, because the engine makes some adjustments).

I hope you can adopt it to your use case.

CodePudding user response：

Resolved with code like this (thank you @Peter Koltai):

TextFormField(
  style: TextStyle(fontFamily: GoogleFonts.jetBrainsMono().fontFamily),
  decoration: InputDecoration(
    labelText: 'Password',
    floatingLabelStyle: TextStyle(
      fontFamily: Theme.of(context).textTheme.subtitle1?.fontFamily,
    ),
  ),
);