Apply a fontSizeFactor to textTheme that is different to 1 crash

[JobiJoba]

Hi,

I'm using flex_color_scheme with flutter_screenutil and when I try to apply a fontSizeFactor of 1.sp (scale the Font) I get the following error:

The following assertion was thrown building Builder(dirty, dependencies: [MediaQuery, _ViewScope]):
'package:flutter/src/painting/text_style.dart': Failed assertion: line 963 pos 12: 'fontSize != null || (fontSizeFactor == 1.0 && fontSizeDelta == 0.0)': is not true.

the code:

ThemeData light = FlexThemeData.light(
  scheme: mainFlexSchema,
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 13,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 20,
    useTextTheme: true,
    useM2StyleDividerInM3: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true,
);

ThemeData lightTheme = light.copyWith(
  textTheme: light.textTheme.apply(fontSizeFactor: 1.sp),
  iconTheme: light.iconTheme.copyWith(size: 24.sp),
);

To me it seems that when I call the light.textTheme.apply(fontSizeFactor: 1.sp) light.textTheme is not initialized yet and so don't have any fontSize set.

If i replace it with something like

ThemeData lightTheme = light.copyWith(
  textTheme: Typography.tall2021.apply(fontSizeFactor: 1.sp),
  iconTheme: light.iconTheme.copyWith(size: 24.sp),
);

it's working (but then the style is different :) )

Does someone already encounter that or someone could guide me through a solution?

[JobiJoba]

ok my bad, this is happening with default ThemeData, it seems that the way I'm doing it is not correct.

Look like textTheme is initialized inside the materialApp and so I cannot apply before the fontSizeFactor.

[rydmike]

Hi @JobiJoba, glad you noticed that, I was about to mention it too that this is the way ThemeData and TextTheme works, not really related to FlexColorScheme.

The textTheme does not actually have any size information until it has passed the localization step in the setup of the MaterialApp.

You can do what you are trying to do, if you add an extra Builder or a custom wrapper widget that all it does is apply the font size mods you want to add, in a new Theme, basically wrapping everything with an extra theme layer. Don't worry about the overhead for this, many Flutter SDK widgets do this as well internally.

Depends a bit on what you are trying to accomplish with the fontSizeFactor. Maybe some kind of in-app control of it? It is often a good idea to let the app get font scaling from system settings, but let's assume you want to do with in app override. Then the extra theme wrapper is a good way to go.

The "terse" info about how to do a wrapper is here in the docs:
https://docs.flutter.dev/cookbook/design/themes#extending-the-parent-theme

But if I take your example, and create eg a wrapper between the MaterialApp and the HomePage in the FlexColorScheme copy/paste from playground example app.

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/main.dart

It could look something like this:

class TextThemeMod extends StatelessWidget {
  const TextThemeMod({
    super.key,
    required this.themeMode,
    required this.onThemeModeChanged,
  });

  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onThemeModeChanged;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return Theme(
      data: theme.copyWith(
        textTheme: theme.textTheme.apply(fontSizeFactor: 1),
      ),
      child: HomePage(
        themeMode: themeMode,
        onThemeModeChanged: onThemeModeChanged,
      ),
    );
  }
}

Above I could control the fontSizeFactor factor programmatically too, but if I just edit (1 -> 1.5 -> 2 -> 1.5 -> 1) and save it so it hot reload, you can see it works and scales the fonts in the app nicely, even with animation, since theme changes lerp animate automatically. And it works in light/dark mode too, since we are operating on the active theme below the MaterialApp after light/dark mode theme has been selected and font sizes applied.

demo.mov

Hope this helps, perhaps you solved it already. This was a good question though and I though I would answer it and I would like to add it to the Q/A in repo Discussions, so other devs can locate it too.

[martin-braun]

That's such a nasty hack. It would be much better if ThemeData.light() or ThemeData.dark() would evaluate the font sizes in advance respectively. This limitation also hinders me on transferring font sizes from the textTheme to other themes. I rather was hoping for a way to resolve those font sizes manually without the necessity of a second Theme widget.

[rydmike]

If you create custom TextThemes that contain defined sizes for all TextStyles in the text theme, then you can do this. However, the default TextTheme and all its TextStyles do not yet have any sizes defined after ThemeData factory call, nor after FlexColorScheme's ThemeData creation. The sizes are added later, not by ThemeData. They are added by the localization step, this is because different locale's have slightly different text styles, and sizes are not known before localization, which happens after first ThemeData creation.

Flutter internally uses a similar builder/widget wrapper and copyWith on ThemeData to modify the sizes on all TextStyles in a both textTheme and primaryTextTheme, so the above solution is just a repeat of what Flutter does as well internally.

You can find out a lot more about custom text theme creation here, if you are not familiar with it:

https://github.com/rydmike/adaptive_theme_demo?tab=readme-ov-file#text-theme

The example above is from the general adaptive theming guide, where I talk about and teach how to do a lot of the things I do in FCS behind the scenes, without FCS. It can be generally helpful as a theming guide, but its section on TextTheme:ing also applies to FlexColorScheme. Although the part of using Google fonts TextTheme's and needing to fix its colors, is not needed with FCS, since FCS will detect when a full GoogleFonts TextTheme is being used as override and do the fix for you.

For more about the odd size behavior and need for a builder to get the sizes, so you can scale your fonts, go up to the beginning of this X/Twitter thread and read much more about it:

https://x.com/RydMike/status/1812474744190476308

[JobiJoba]

Wow! Thank you for taking the time to look at it :)

I paused the development of the app that needed this but implemented it right now to check and it works. It might give me motivation to go back onto it :)

I'm "overriding" the fontSizeFactor so it scale depending on screen size without the need to set a scale everytime I'm using one of the textTheme property (ex HeadlineLarge.copyWith(fontSize: x.sp) (It's the recommended way in the docs of flutter_screenutil).