Custom values for primaryTextTheme does not apply #160
-
I believe it is related to this issue #151 I also encountered the issue above, and what. I did was use the
here's my customTextTheme
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. 😅 |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments
-
Hi @jayveecaayao, thanks for the report. I am trying to reproduce it but I am not able to do so. Reproduction of issue setupCan you confirm a few things:
You will not see the effective 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 GuidanceMeanwhile, 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 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 You will also notice that I in ======== 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 With this in place, if we look at reported styles, we can see this in dark mode for
You will of course not see those weights and styles on the If I comment e.g. the styles 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 SetupWith the above setup we can observe two issues:
1. Font color issueWhen you make a custom This means you again get a Until GoogleFonts start returning a I reported this and made a suggestion that GoogleFonts should return null color, or at least offer also such a Until then, you have to manage colors yourself when using To demonstrate this, I can add a light theme mode theme, using the same setup with the custom 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 theme: lightThemeData,
darkTheme: darkThemeData, We then get a light theme mode This is the GoogleFonts TextTheme issue. You get the same issue and result with vanilla 2. Bold is not BoldAs 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 The font To actually use a font type with the font designed bold weight, you will need to specify it on TextStyle level.
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 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 This works because except for the font (and its used weight), all other Proposed SetupArmed with this info, we can see that it will be better to just work with raw 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 You can also notice that I no longer use a
This type of
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
I also applied as an example this Here are the results: Light mode (M3):Dark mode (M3):If you change now to use M2 ( Light mode (M2):Dark mode (M2):Related issuePlease note that FlexColorScheme does not have this issue, if color in a used passed in |
Beta Was this translation helpful? Give feedback.
-
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 I also as a result of this question, I added a new feature to show 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 |
Beta Was this translation helpful? Give feedback.
-
@rydmike Hello! Thanks for the detailed explanation 😄 I really appreciate it. I see where I got it wrong. I assumed that I will also read more thoroughly the suggestions you gave and will do a refactor on my side accordingly. Thank you again! 🙇 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
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:
textTheme
above?primaryTextTheme
you will find those styles only in theprimaryTextTheme
(that by default has text color that fits on background with primary color) not at all in theTextTheme
.You will not see the effective
textTheme
orprimaryTextTheme
in the same context as theMaterialApp
. 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…