Search code examples
flutterdartflutter-layout

How to change text color of TextFormField according to theme

I want to change inputted text color as per the current theme, as text color is not a part of InputDecorationTheme.

enter image description here

As of now the only possible way to change inputted text color is to give style to TextFormField but that also not work when theme gets changed + in that way I need to repeat the similar code for each of my text field available in the app.

enter image description here

Solution

  • you can do by using property subhead inside the TextTheme

     theme: ThemeData( 
    brightness: Brightness.dark,
    primaryColor: Colors.orange,
    accentColor: Colors.green,
    textTheme: TextTheme(
      subhead: TextStyle(color: Colors.blue),
    ),
  ),

    Or by using this :

     theme: ThemeData(
      brightness: Brightness.dark,
      primaryColor: Colors.orange,
      accentColor: Colors.green,
      textTheme: Theme.of(context)
          .textTheme
          .apply(bodyColor: Colors.red)`enter code here`

  ),

    A blog on Text Styling in Flutter https://medium.com/flutter- community/beginners-guide-to-text-styling-in-flutter-3939085d6607

    NOTE: The Material Design typography scheme was significantly changed in the current (2018) version of the specification more info https://material.io/design/typography.

    The 2018 spec has thirteen text styles:

     NAME         SIZE  WEIGHT  SPACING
 headline1    96.0  light   -1.5
 headline2    60.0  light   -0.5
 headline3    48.0  regular  0.0
 headline4    34.0  regular  0.25
 headline5    24.0  regular  0.0
 headline6    20.0  medium   0.15
 subtitle1    16.0  regular  0.15
 subtitle2    14.0  medium   0.1
 body1        16.0  regular  0.5   (bodyText1)
 body2        14.0  regular  0.25  (bodyText2)
 button       14.0  medium   1.25
 caption      12.0  regular  0.4
 overline     10.0  regular  1.5

    where "light" is FontWeight.w300, "regular" is FontWeight.w400 and "medium" is FontWeight.w500.

    The [TextTheme] API was originally based on the original material (2014) design spec, which used different text style names. For backwards compatibility's sake, this API continues to expose the old names. The table below should help with understanding the mapping of the API's old names and the new names (those in terms of the 2018 material specification).

    Each of the [TextTheme] text styles corresponds to one of the styles from 2018 spec. By default, the font sizes, font weights and letter spacings have not changed from their original, 2014, values.

     NAME       SIZE   WEIGHT   SPACING  2018 NAME
 display4   112.0  thin     0.0      headline1
 display3   56.0   normal   0.0      headline2
 display2   45.0   normal   0.0      headline3
 display1   34.0   normal   0.0      headline4
 headline   24.0   normal   0.0      headline5
 title      20.0   medium   0.0      headline6
 subhead    16.0   normal   0.0      subtitle1
 body2      14.0   medium   0.0      body1 (bodyText1)
 body1      14.0   normal   0.0      body2 (bodyText2)
 caption    12.0   normal   0.0      caption
 button     14.0   medium   0.0      button
 subtitle   14.0   medium   0.0      subtitle2
 overline   10.0   normal   0.0      overline