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


Solution 1: Osama FelFel

I believe you are looking for subhead

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


Solution 2: Trần Đức Tâm

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.
);


Solution 3: Bliv_Dev

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


Solution 4: Joe Muller

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()
      ),