Search code examples
fluttermaterial-designflutter-webflutter-theme

Can you change flutter text theme?


If the theme is set in main.dart as

return MaterialApp(
  title: 'MY APP',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    fontFamily: 'Cabin',
    textTheme: TextTheme(
      headline1: TextStyle(
        fontFamily: 'Raleway',
        color: Colors.black,
        fontWeight: FontWeight.w600,
        fontSize: 18,
      ),
      subtitle1: TextStyle(
        fontFamily: 'Raleway',
        color: Colors.black54,
        fontWeight: FontWeight.w600,
        fontSize: 16,
      ),
    ),
  ),

and I'm using the theme as

Text('MY STRING',
    style: Theme.of(context).textTheme.subtitle1),

How can I make 'MY STRING' be a different color then the subtitle1 theme color while keeping the other properties of theme data, such as font weight and family and size, etc.?


Solution

  • You can use de method copyWith(color: your_color) to change properties of a TextTheme.

    Example:

    Text('MY STRING',
      style: Theme.of(context).textTheme.subtitle1
        .copyWith(color: Colors.red),
    )
    

    Doc Reference: https://api.flutter.dev/flutter/material/TextTheme/copyWith.html