12

So in my flutter app, I create TextFormField to use as an input like so (and return it in a scaffold):

final password = TextFormField(
      controller: passController,
      autofocus: false,
      obscureText: true,
      decoration: InputDecoration(hintText: 'Password'),
      style: new TextStyle(color: Colors.orange),
);

I would like to change the style property inside a themeData, but I couldn't find which property to specify.

The closest one I could get to was textTheme: new TextTheme(body1: new TextStyle(color: Colors.orange)), but this one does nothing to my TextFormField.

How can I set the TextFormField style? Please help, I'm really new to Dart and also programming. I'm currently 13 and I have nobody to help me out with these types of things.

P.S: The complete code is on GitHub if needed: https://github.com/Legolaszstudio/novynotifier

4 Answers 4

11

Update:

If you want to change the Text within TextField by Theme of your Flutter App. It's now subtitle1 of TextTheme.

textTheme: TextTheme(
    subtitle1: TextStyle(color: Colors.blue),
)
3
  • 2
    It's weird that Flutter allows all the other text styles to be set on the theme, like label style, but not the input style itself.
    – Scott
    Nov 24, 2021 at 13:20
  • 3
    This worked. Unfortunately, subTitle1 cannot be used on Material Design 3. Instead use titleMedium. Apr 25, 2022 at 11:24
  • @Scott Yup... Who would want their TextField text to be the same size as their titles? A goddamn psychopath. Aug 6 at 6:35
6

Uhm! That's a long question. TextFormField are subclass of the TextField. The default style of TextField could be found from source below.

final TextStyle style = themeData.textTheme.subhead.merge(widget.style);

So, you have 2 solutions for your source code.

Solution 1

  • Delete style property are inputted to password.
final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: new TextStyle(color: Colors.orange), // ★ => Delete this.
);
  • Define a custom subhead style from DataTheme and input into Material app.
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)

Solution 2

  • Define a custom subhead style from DataTheme and input into Material app.
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.orange),
    ),
  ),
  home: null,
)
  • Copy this subhead style into password
final themes = Theme.of(context);
final password = TextFormField(
  controller: passController,
  autofocus: false,
  obscureText: true,
  decoration: InputDecoration(hintText: 'Password'),
  style: themes.textTheme.subhead, // ★ => Update this.
);
2
  • 4
    subhead is now deprecated, use subtitle2 ;) Apr 26, 2021 at 9:57
  • 1
    subtitle1, not 2 :)
    – Marco
    Mar 1, 2022 at 9:51
4

2021 - 2022

The Material spec for typography changed significantly in 2021 and now uses display, headline, title, body, and label types. titleMedium is the one that will effect all of your TextFields and TextFormFields.

This fact is highlighted in the TextTheme class docs as well.

If you're using the the titleMedium TextStyle for something else, you can easily wrap your TextFields and TextFormFields in a Theme widget and update this style specifically for these widgets like this:

Theme(
        data: Theme.of(context).copyWith(
            textTheme: Theme.of(context).textTheme.copyWith(
                  titleMedium: TextStyle(
                    fontSize: 12, 
                    fontWeight: FontWeight.w300,
                  ),
                )),
        child: TextField()
      ),
2

I believe you are looking for subhead

textTheme: TextTheme(
    subhead: TextStyle(color: Colors.orange),
)
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.