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.

[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).