Custom values for primaryTextTheme does not apply

[jayveecaayao]

I believe it is related to this issue #151

I also encountered the issue above, and what. I did was use the primaryTextTheme instead of the textTheme property of FlexThemeData.dark

final darkThemeData = FlexThemeData.dark(
  colorScheme: darkColorScheme,
  useMaterial3: true,
  fontFamily: GoogleFonts.openSans().fontFamily,
  primaryTextTheme: customOpenSansTextTheme,
  appBarBackground: backgroundDark,
  subThemesData: const FlexSubThemesData().copyWith(
    useTextTheme: true,
    navigationBarSelectedIconSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
    navigationBarIndicatorOpacity: 1,
    textButtonTextStyle: MaterialStatePropertyAll(
      customOpenSansTextTheme.labelLarge
          ?.copyWith(color: darkColorScheme.primary),
    ),
  ),
);

here's my customTextTheme

final openSansTextTheme = GoogleFonts.openSansTextTheme();

final customOpenSansTextTheme = openSansTextTheme.copyWith(
  titleLarge:
      openSansTextTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
  titleSmall:
      openSansTextTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
  titleMedium:
      openSansTextTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
  labelMedium:
      openSansTextTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700),
  labelLarge: openSansTextTheme.labelLarge?.copyWith(
    fontWeight: FontWeight.w700,
  ),
);

MaterialApp.router(
        theme: lightThemeData,
        darkTheme: darkThemeData,
        themeMode: ThemeMode.dark,...

I tried debugging on my page and the custom font weight wasn't applied

I'm not sure if I just missed something or if this is really a bug. 😅

[rydmike]

Hi @jayveecaayao, thanks for the report.

I am trying to reproduce it but I am not able to do so.

Reproduction of issue setup

Can you confirm a few things:

• Used version of FlexColorScheme
• In what context are you examining the textTheme above?
• Also if you are applying styling to primaryTextTheme you will find those styles only in the primaryTextTheme (that by default has text color that fits on background with primary color) not at all in the TextTheme.

You will not see the effective textTheme or primaryTextTheme in the same context as the MaterialApp. You need to be in the context below it.

Maybe the explanations and examples below help and clarifies the situation.

Of course if you still see an issue, please describe the setup with more detail. Preferably even with a reproduction sample.

Custom TextTheming Guidance

Meanwhile, let me try use your example setup and show some use cases with it.

If I for example use the Copy Paste from Playground example as demo, from the package repo and use your example themes, and also add a Weight 800 to displayLarge, just to be able to see the results visually better. If I do that, I then have:

final TextTheme openSansTextTheme = GoogleFonts.openSansTextTheme();

final TextTheme customOpenSansTextTheme = openSansTextTheme.copyWith(
  displayLarge:
      openSansTextTheme.displayLarge?.copyWith(fontWeight: FontWeight.w800),
  titleLarge:
      openSansTextTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
  titleSmall:
      openSansTextTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
  titleMedium:
      openSansTextTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
  labelMedium:
      openSansTextTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700),
  labelLarge:
      openSansTextTheme.labelLarge?.copyWith(fontWeight: FontWeight.w700),
);

final ThemeData darkThemeData = FlexThemeData.dark(
  colorScheme: flexSchemeDark,
  useMaterial3: true,
  fontFamily: GoogleFonts.openSans().fontFamily,
  primaryTextTheme: customOpenSansTextTheme,
  appBarBackground: flexSchemeDark.surfaceVariant,
  subThemesData: FlexSubThemesData(
    useTextTheme: true,
    navigationBarSelectedIconSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
    navigationBarIndicatorOpacity: 1,
    textButtonTextStyle: MaterialStatePropertyAll(
      customOpenSansTextTheme.labelLarge
          ?.copyWith(color: flexSchemeDark.primary, inherit: false),
    ),
  ),
);

For now, I keep the light theme mode as it is in the Copy-paste playground example, and apply only the dark theme from your example:

      // Light theme mode example from default in copy Playgorund demo app.
      theme: FlexThemeData.light(
        useMaterial3: true,
        scheme: FlexScheme.redWine,
        blendLevel: 2,
        appBarOpacity: 0.98,
        subThemesData: const FlexSubThemesData(
          inputDecoratorRadius: 8,
          inputDecoratorPrefixIconSchemeColor: SchemeColor.primary,
          inputDecoratorSchemeColor: SchemeColor.primary,
          inputDecoratorBackgroundAlpha: 0x18,
          inputDecoratorUnfocusedHasBorder: false,
          appBarScrolledUnderElevation: 6,
          popupMenuOpacity: 0.96,
          bottomNavigationBarOpacity: 0.96,
          navigationBarOpacity: 0.96,
          navigationRailOpacity: 0.96,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        // Custom fonts to demonstrate you pass a default GoogleFonts TextTheme
        // to both textTheme and primaryTextTheme in M2/M3 mode as well as in
        // light/dark theme and have them get correct default color and
        // contrast color in all cases. Vanilla ThemeData does not do this.
        fontFamily: GoogleFonts.notoSans().fontFamily,
        textTheme: GoogleFonts.notoSansTextTheme(),
        primaryTextTheme: GoogleFonts.notoSansTextTheme(),
      ),

      // Your example dark theme here, with custom primaryTextTheme as defined in it.
      darkTheme: darkThemeData,

You can notice in darkThemeData for the FlexSubThemesData, that I removed the extra copyWith. It is not needed, does not hurt, but the resulting FlexSubThemesData in not const anyway, so it is not necessary, just extra overhead. The thing that makes it none const is the MaterialStatePropertyAll, since it is not.

You will also notice that I in textButtonTextStyle added inherit: false. This is a Flutter TextStyle thing (annoyance), you will run into this error if it is true (which it is by default).

======== Exception caught by widgets library =======================================================
The following assertion was thrown building NotificationListener<LayoutChangedNotification>:
Failed to interpolate TextStyles with different inherit values.

The TextStyles being interpolated were:
from: TextStyle
  debugLabel: ((englishLike labelLarge 2021).merge((((blackRedwoodCity labelLarge).apply).apply).merge((((blackRedwoodCity labelLarge).apply).apply).merge(((blackRedwoodCity labelLarge).copyWith).copyWith)))).copyWith
  inherit: false
  color: Color(0x613e0a13)
  family: NotoSans_regular
  familyFallback: NotoSans
  size: 14.0
  weight: 500
  letterSpacing: 0.1
  baseline: alphabetic
  height: 1.4x
  leadingDistribution: even
  decoration: Color(0xff000000) TextDecoration.none
to: TextStyle
  debugLabel: (lerp(unknown ⎯0.2→ ((((blackRedwoodCity labelLarge).copyWith).copyWith).copyWith).copyWith)).copyWith
  inherit: true
  color: Color(0x61542c37)
  weight: 400
The following fields are unspecified in both TextStyles:
"backgroundColor", "wordSpacing", "decorationThickness".
When "inherit" changes during the transition, these fields may observe abrupt value changes as a result, causing "jump"s in the transition.

In general, TextStyle.lerp only works well when both TextStyles have the same "inherit" value, and specify the same fields.
If the TextStyles were directly created by you, consider bringing them to parity to ensure a smooth transition.


If one of the TextStyles being lerped is significantly more elaborate than the other, and has "inherited" set to false, it is often because it is merged with another TextStyle before being lerped. Comparing the "debugLabel"s of the two TextStyles may help identify if that was the case.
For example, you may see this error message when trying to lerp between "ThemeData()" and "Theme.of(context)". This is because TextStyles from "Theme.of(context)" are merged with TextStyles from another theme and thus are more elaborate than the TextStyles from "ThemeData()" (which is reflected in their "debugLabel"s -- TextStyles from "Theme.of(context)" should have labels in the form of "(<A TextStyle>).merge(<Another TextStyle>)"). It is recommended to only lerp ThemeData with matching TextStyles.

So to avoid that, I set the textButtonTextStyle in the copyWith to inherit: false.

With this in place, if we look at reported styles, we can see this in dark mode for primaryTextTheme:

NOTE: The detailed text style information shown in screenshots here do not exists in the Themes Playground or Copy-Paste Playground version of the TextTheme presentation widgets. I added them as extra info for this case study. They only inspect Theme.of(context).textTheme and each style and their current main properties. I will add showing this behind a toggle to this widget in next release. It can be helpful for trouble shooting and testing your text theme, especially in the Copy-paste Playground where you can easily add your own text themes.

You will of course not see those weights and styles on the textTheme since they are not applied to it:

If I comment e.g. the styles displayLarge and labelLarge that are used for primaryTextTheme,

final TextTheme customOpenSansTextTheme = openSansTextTheme.copyWith(
  // displayLarge:
  //     openSansTextTheme.displayLarge?.copyWith(fontWeight: FontWeight.w800),
  titleLarge:
      openSansTextTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
  titleSmall:
      openSansTextTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
  titleMedium:
      openSansTextTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
  labelMedium:
      openSansTextTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700),
  // labelLarge:
  //     openSansTextTheme.labelLarge?.copyWith(fontWeight: FontWeight.w700),
);

the custom weights for them are gone and back to defaults:

Issues With Above Setup

With the above setup we can observe two issues:

1. Font color issue. The wrong M3 colors are being used.
2. Bold is not bold. The weight700 and weight800 fonts do not look right.

1. Font color issue

When you make a custom TextTheme with GoogleFonts you are responsible for providing the correct contrast colors. The fix for colors (that was reported here #151 and fixed via #153) to get correct M2/M3 and light/dark textTheme/primaryTextTheme colors, only apply if you use a default GoogleFonts.nnnTextTheme(). As soon as you add any customization to it, the detection I added for it being a GoogleFonts default TextTheme, and making colors "null" so they get correct colors by default, no longer applies/works.

This means you again get a TextTheme with colors that are only correct for: M2-mode, in light mode and only for textTheme. For everything else it might not fit at all, or just be slightly out of spec, depending on the situation.

Until GoogleFonts start returning a TextTheme where color is NULL, so that ThemeData and also FlexColorScheme, can apply correct default colors for each situation, this issue will remain.

I reported this and made a suggestion that GoogleFonts should return null color, or at least offer also such a TextTheme, for easier style customizations. If made, it would mean that unless you have very special font color needs, you do not have to specify it, the color will be correct and usable by default. You can find that report here: material-foundation/flutter-packages#401

Until then, you have to manage colors yourself when using GoogleFonts.nnnTextTheme().

To demonstrate this, I can add a light theme mode theme, using the same setup with the custom primaryTextTheme, like so:

final ThemeData lightThemeData = FlexThemeData.light(
  colorScheme: flexSchemeLight,
  useMaterial3: true,
  fontFamily: GoogleFonts.openSans().fontFamily,
  primaryTextTheme: customOpenSansTextTheme,
  appBarBackground: flexSchemeDark.surfaceVariant,
  subThemesData: FlexSubThemesData(
    useTextTheme: true,
    navigationBarSelectedIconSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
    navigationBarIndicatorOpacity: 1,
    textButtonTextStyle: MaterialStatePropertyAll(
      customOpenSansTextTheme.labelLarge
          ?.copyWith(color: flexSchemeDark.primary, inherit: false),
    ),
  ),
);

and we use that as our MaterialApp.theme for light mode instead:

  theme: lightThemeData,
  darkTheme: darkThemeData,

We then get a light theme mode primaryTextTheme with the wrong contrast color, it is for light background. Not only is it the wrong contrast color, but it also uses M2 mode text colors, not M3:

This is the GoogleFonts TextTheme issue. You get the same issue and result with vanilla ThemeData as with FlexColorScheme.

2. Bold is not Bold

As seen in images above earlier, the shown fonts do not really look bold at all. If you look at the font info in the screen shots where weight is 700 and 800, you can see that the font is still OpenSans_regular, so it is not the actual bold or extra bold font.

The font OpenSans_regular it is getting some weight, by rendering the regular font at higher weight, but end result of that is quite subtle and imo bad.

To actually use a font type with the font designed bold weight, you will need to specify it on TextStyle level.

NOTE: If you bundle fonts as assets, e.g. for correct font with no internet access, you will need to provide the asset file for each used weight. This is described in GogoleFonts docs.

Let's fix this. Here is an example, where I make an OpenSans bold style, and apply it, for now, only to Display Large and Label Large:

final TextTheme openSansTextTheme = GoogleFonts.openSansTextTheme();
final TextStyle openSansBold =
    GoogleFonts.openSans(fontWeight: FontWeight.w700);

final TextTheme customOpenSansTextTheme = openSansTextTheme.copyWith(
  displayLarge: openSansBold,
  titleLarge:
      openSansTextTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
  titleSmall:
      openSansTextTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700),
  titleMedium:
      openSansTextTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
  labelMedium:
      openSansTextTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700),
  labelLarge: openSansBold,
);

Now those two styles actually look bold and you can see that the used font is OpenSans_700 for them, where we used that actual bold font.

Ironically, if we look at the light theme mode primaryTextTheme, we can see that we now also have the correct color for these two styles, while the rest still remain wrong:

It is even correct M3 color. We can also see that we kept correct default point styles and letter spacing etc. If you would toggle to M2 mode (and in FCS remove useTextTheme: true), they get M2 style colors, font sizes and letter spacing, while still being bold:

This works because except for the font (and its used weight), all other TextStyle properties on our specified custom TextTheme are null. All other property values are being applied by ThemeData, or in our case FlexColorScheme, via default typography and defaults for light/dark and M2/M3 mode and right contrast for normal textTheme or primaryTextTheme. Some of the correct sizes and geometry are actually not even applied by the ThemeData factory process, they come later in the localization step. This is needed, since geometry also varies by locale. Font TextStyle and TextTheme is a complex beast. 😄

Proposed Setup

Armed with this info, we can see that it will be better to just work with raw TextStyle and make our own TextTheme from them, like this:

final TextStyle openSansRegular =
    GoogleFonts.openSans(fontWeight: FontWeight.w400);
final TextStyle openSansMedium =
    GoogleFonts.openSans(fontWeight: FontWeight.w500);
final TextStyle openSansBold =
    GoogleFonts.openSans(fontWeight: FontWeight.w700);

final TextTheme customOpenSansTextTheme = TextTheme(
  displayLarge:
      openSansBold.copyWith(fontSize: 50), // Custom bold and size (Regular is default)
  displayMedium: openSansRegular, // Regular is default
  displaySmall: openSansRegular, // Regular is default
  headlineLarge: openSansRegular, // Regular is default
  headlineMedium: openSansRegular, // Regular is default
  headlineSmall: openSansRegular, // Regular is default
  titleLarge: openSansBold, // Custom bold (Regular is default)
  titleMedium: openSansBold, // Custom bold (Medium is default)
  titleSmall: openSansBold, // Custom bold (Medium is default)
  bodyLarge: openSansRegular, // Regular is default
  bodyMedium: openSansRegular, // Regular is default
  bodySmall: openSansRegular, // Regular is default
  labelLarge: openSansBold, // Custom bold (Medium is default)
  labelMedium: openSansBold, // Custom bold (Medium is default)
  labelSmall: openSansMedium, // Medium is default
);

Above I used the bold font in all places where you had used it as well, plus in the displayLarge style. For all the other styles, I used the same weights M3 TextTheme has by default.

You can also notice that I no longer use a GoogleFonts.openSansTextTheme as base that I copyWith styles over it. The base is instead just a default TextTheme where the only property defined in each style is the font and if we should use bold/medium/regular version. Except in displayLarge, where I just as an example also made its size smaller than the default M3 size.

From above example it is also obvious that we can easily use other fonts as well for some of the TextStyles in our custom TextTheme with this setup.

This type of TextTheme works very well when you make ThemeData (with or without FlexColorScheme) and apply it to textTheme and primaryTextTheme. It works in any mode:

• M2/M3 mode
• light/dark theme mode
• With textTheme and primaryTextTheme color wise, since it is null.

ThemeData will merge and apply defaults for all other undefined null properties.

So let's try this and make dark/light themes with them so:

final ThemeData darkThemeData = FlexThemeData.dark(
  colorScheme: flexSchemeDark,
  useMaterial3: true,
  textTheme: customOpenSansTextTheme,
  primaryTextTheme: customOpenSansTextTheme,
  appBarBackground: flexSchemeDark.surfaceVariant,
  subThemesData: FlexSubThemesData(
    navigationBarSelectedIconSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
    navigationBarIndicatorOpacity: 1,
    textButtonTextStyle: MaterialStatePropertyAll(
      customOpenSansTextTheme.labelLarge
          ?.copyWith(color: flexSchemeDark.primary, inherit: false),
    ),
  ),
);

final ThemeData lightThemeData = FlexThemeData.light(
  colorScheme: flexSchemeLight,
  useMaterial3: true,
  textTheme: customOpenSansTextTheme,
  primaryTextTheme: customOpenSansTextTheme,
  appBarBackground: flexSchemeDark.surfaceVariant,
  subThemesData: FlexSubThemesData(
    navigationBarSelectedIconSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onPrimaryContainer,
    navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
    navigationBarIndicatorOpacity: 1,
    textButtonTextStyle: MaterialStatePropertyAll(
      customOpenSansTextTheme.labelLarge
          ?.copyWith(color: flexSchemeDark.primary, inherit: false),
    ),
  ),
);

I removed the fontFamily: GoogleFonts.openSans().fontFamily definition from theme setup. It has no effect if each style in the used textTheme and primaryTextTheme already have a font name applied.

Additionally I removed useTextTheme: true, which means force use "M3" text theme. Since we are in M3 mode, we don't need that. If undefined null, the M3 style TextTheme is used in M3 mode by default. If we keep it there as useTextTheme: true and set to M2 mode, we get M3 TextTheme styles forced in M2 mode. If it is null, you get M2 TextTheme in M2 mode. Likewise if you set it to false, and use M3 mode, you get M2 mode TextTheme styles forced in M3 mode.

I also applied as an example this customOpenSansTextTheme to both textTheme and primaryTextTheme in both light and dark mode:

Here are the results:

Light mode (M3):

Dark mode (M3):

If you change now to use M2 (useMaterial3: false), we can see we get M2 sizes and colors, and right contrasts still for all styles, except DisplayLarge, which always uses the font size we specified for it.

Light mode (M2):

Dark mode (M2):

---

Related issue

Please note that primaryTextTheme also has ODD behavior in dark mode with vanilla ThemeData. You can read more about that here flutter/flutter#118146.

FlexColorScheme does not have this issue, if color in a used passed in primaryTextTheme does not have color values specified in each style, it will make a text theme with colors that has the right contrast for primary color in ColorScheme, also in dark mode.

[rydmike]

Let me know @jayveecaayao if any of the above helped you and can maybe be used to resolve your issue and question. And of course if you still see an issue, please describe the setup with more detail. Preferably even with a reproduction sample, so we can figure it out.

Generally, using GoogleFonts and theming with custom TextTheme and TextStyles, can be quite tricky as demonstrated above, so it is a really good question. Regardless of what the actual issue might end up having been, this will be a good addition to the Q&A topics in Discussion.

---

I also as a result of this question, I added a new feature to show TextStyle details in Themes Playground and its TextThemes. Maybe not so useful there now, but it will be if I later add text theming support.

The feature will also exist in the Copy-Paste Playground example, there is can be more useful when you test a theme if you also add your custom TextTheme, you can then see how it is being applied and used by each style.

This is not released yet, but will be in next one.

Screen.Recording.2023-05-25.at.11.27.40.mov

[jayveecaayao]

@rydmike Hello! Thanks for the detailed explanation 😄 I really appreciate it. I see where I got it wrong. I assumed that primaryTextTheme == textTheme when using it from Theme.of(context). 😅

I will also read more thoroughly the suggestions you gave and will do a refactor on my side accordingly. Thank you again! 🙇

[rydmike]

You are welcome @jayveecaayao. I am converting this issue to a Discussion Q&A as I think it contains a lot of things that might be useful to other devs too, and that makes it more discoverable.