Debug School

rakesh kumar
rakesh kumar

Posted on

HOW TO CHANGE THE ENTIRE THEME'S TEXT COLOR IN FLUTTER?

Output Screenshot:

SOLUTION
I think TextTheme.apply is what you want. bodyColor will be applied to headline, title, subhead, button, body1, and body2. displayColor will be applied to display1 through display4, and caption. If you specify both bodyColor and displayColor and use the same color value, that will effectively change text colors on all text styles.

Example:

final newTextTheme = Theme.of(context).textTheme.apply(
  bodyColor: Colors.pink,
  displayColor: Colors.pink,
);
Enter fullscreen mode Exit fullscreen mode

I found using copyWith() on the TextTheme works well, as you can just change specific properties like fontsize - leaving everthing else unchanged.

 textTheme: TextTheme().copyWith(
      bodyText2: TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold
      )
    ),
Enter fullscreen mode Exit fullscreen mode

mine is working with this:

return MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);
Enter fullscreen mode Exit fullscreen mode
ThemeData(
    primaryTextTheme: Typography(platform: TargetPlatform.iOS).white,
    textTheme: Typography(platform: TargetPlatform.iOS).white,
)
Enter fullscreen mode Exit fullscreen mode

To provide an alternative that seems to work without setting all the Text styles directly is to change the style of the DefaultTextStyle at the place in the Widget tree to take effect

return DefaultTextStyle(
  style: TextStyle(color: Colors.pink),
  child: _YOUR_WIDGETS_
)
Enter fullscreen mode Exit fullscreen mode

For the entire app, you can set textTheme property in the Material app widget.

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(),
      bodyText2: TextStyle(),
    ).apply(
      bodyColor: Colors.orange, 
      displayColor: Colors.blue, 
    ),
  ),
) 
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Full Summary:
Theme.of(context).textTheme.apply--bodyColor,displayColor
bodyText2: TextStyle--fontSize,fontWeight
ThemeData--textTheme---bodyText2--color
ThemeData--primaryTextTheme,textTheme
DefaultTextStyle--style,child: _YOUR_WIDGETS

-
** Image des**
body:colunm(MainAxisAlignment.center) and floating button
body:colunm(MainAxisAlignment.center)--children--row(MainAxisAlignment.center) and sized box and text and elevated button
row(MainAxisAlignment.center)-- four Container inside row
theme data--primary

Refrence
Click here
Click here
Click here
Click here
Click here

Top comments (0)