FlexSubThemesData font size change going from 6.1.2 to 7.0.5

[Petri-Oosthuizen]

I've seen a jump in text size going from flex_color_scheme 6.1.2 to 7.0.5. I am unable to find a reason for this going through the changelog and releases.

After testing a few of the FlexThemeData's props I've narrowed it down to FlexSubThemesData. The following does not have the same font size on 6.1.2 and 7.0.5:

FlexThemeData.light(
    subThemesData: const FlexSubThemesData(),
  );

Do you perhaps know why this might be?

[rydmike]

Hi @Petri-Oosthuizen thanks for your question.

It is a good question and glad to have it here in Q&A section, it will be a good addition to it.

Also sorry for the delay, for some reason I did not see the question here before, despite that I am sure I checked, I try to check in daily, and I should get notifications in the GH app too, but did not see one for this, weird.

The answer is quite simple, it is a breaking change from V6 to V7.

Breaking Change V6 to V7 useTextTheme

The breaking change property in action is useTextTheme in subThemesData.

Background

• The left one in your pics is the Material Typography2018, that should be used in Material2 (M2) design. Flutter ThemeData by the way defaults to Typography2014. You have to enable Typography2018 manually to get it with vcanilla ThemeData. If you don't, ThemeData will give you the wrong and even older Typography2014. It looks a bit different and is even bigger.

• The right one is Material Typography2021, that should be used in Material3 (M3). Flutter ThemeData defaults to it when you set ThemeData(useMaterial3: true).

Breaking behavior in useTextTheme

FlexColorScheme 7.0.0 contains some breaking changes from 6.x. This is one of them. It is listed in the change log, but yes very hard to find and a bit too verbosely explained. The property in action is useTextTheme in subThemesData.

theme: FlexThemeData.light(
  scheme: FlexScheme.materialBaseline,
  subThemesData: const FlexSubThemesData(
    useTextTheme: true,
  ),
),

When useTextTheme is false you get Typography2018, when it is true you get Typography2021.

In V6 and earlier useTextTheme was non nullable and defaulted to false.

In V7 and later it is nullable and defaults to null.

If it is null and useMaterial3 is false, you get Typography2018, if useMaterial3 is false you get Typography2021. Effectively resulting in that if you did not define useTextTheme, the used effective Typography follows the correct style for M2 and M3 when useMaterial3 is toggled.

When you set useTextTheme to true you of course as before get Typography2021, regardless of what value useMaterial3 has, likewise for setting it to false, always gives you Typography2018.

Q: Why is it called useTextTheme?

A: Legacy.

Before there was Typography2021 in Flutter. FlexColorScheme already offered the M3 styled TextTheme in M3 mode, before Flutter supported it. It did so by using Typography2018 and creating a custom TextTheme that was a copy of the coming M3 style. You opted in on using it, by setting useTextTheme (use "M3" style TextTheme) to true.

Later when Flutter introduced the correct Typography for M3, the custom text theme was removed as no longer needed in FlexColorScheme. Instead this property was changed to function as toggle for using the M3 typography. In hindsight I should have deprecated the property and introduced a new more logically named one.

Setting in Themes Playground

The Themes Playground is a bit too fancy with the toggle that sets this property. Its fancy behavior has nothing to do with the API, just how the Playground uses it. The Playground minimizes all displayed code settings, it does not write out properties that do not need to be set to produce displayed result. So if you change the toggle that controls useTextTheme, from null, to false or true, it will only show the true/false control value in the produced code, if you are also using M2/M3 mode where the style request has a result that goes against what Typography the M2/M3 mode gets anyway in that mode. This is illustrated below:

M2-Mode useTextTheme:null	M2-Mode useTextTheme:false	M2-Mode useTextTheme:true

Above in M2 mode, you only see any code impact from the setting, when you are in M2 mode and the setting is ON, then you see the useTextTheme: true. If you keep the setting "ON", and change to M3 mode, Playground removes it from presented code, since adding the true value produces the displayd result anyway. This can be seen below:

M3-Mode useTextTheme:null	M3-Mode useTextTheme:false	M3-Mode useTextTheme:true

It would probably be clearer if the Playground always wrote code with useTextTheme: false/true regardless of mode when it is not default/null. Since if you change M2/M3 mode in code in your app, after copy/pasting the code from Playground and you had true/false defined in the toggle, but it was not needed in the used M2/M3 mode, you would not know that you need to set it if you change the mode in code, to get the same style with the API when you toggle mode. The Playground does this automatically, adds the code for the toggle only when needed, and removes it whenever not needed.

The Playground goes more with "what you see when you copy the code, is what you get". If you edit the code in your app after copying, and are not familiar with the API, you may in a few rare cases get different results. For this property, keeping the true/false value in code Playground writes, as soon as it is not not null, is probably a better idea for the Playground behavior. It would facilitate more understandable behavior when toggling M2/M3 in code produced by the Playground.

Properties with Similar Playground behavior

There are a few other similar settings that the Playground removes when you switch to M2 mode, even if the toggles are on in the Playground. They are settings that have no impact in M2. Their names are more obvious though, like swapLegacyOnMaterial3: true and useM2StyleDividerInM3: true. Even so, I think I should do the same for them, so that Playground writes them out from your settings if you have them ON, even if you use M2 mode, where they have no effect. Then if you toggle in code to M3, you get the effect you might have seen when you used them code in M3 mode in the Playground. Well I think I will keep those two as they are for now, currently Playground disables their controls and removes their value from code when you toggle to M2, so at least in Playground it is clear they have no use in M2 mode. In the API if you leave them in there in M3 mode, they just don't have any effect.

Hope this answers your question, with more detail than you probably wanted to know 😄

---

Below a ref to the obscure change log entry about this case.

The actual change log of useTextTheme

• From file Changes from 7.0.0-dev.2 to 7.0.0-dev.3 (final beta)

• API default value breaking: The FlexSubThemesData property useTextTheme, is now nullable and defaults to null. Previously it was not nullable and defaulted to false. As before, this boolean toggle determines if the Material 3 TextTheme and Typography is used.
  • When opted in on using FCS sub-themes, this flag controls if text theme uses the new Material Typography.material2021.
  • If not defined, and ThemeData.useMaterial3 is true, then useTextTheme defaults to true and Typography.material2021 is used.
  • If ThemeData.useMaterial3 is false, then useTextTheme defaults to false, and Typography.material2018 is used.
  • This toggle works as a quick override setting for using Typography.material2021 in Material 2 mode, and for using Typography.material2018 in Material 3 mode.
  • As before, when using FlexColorScheme and ThemeData.useMaterial3 is false and sub themes are not used, the default typography is Typography.material2018. Note that if FlexColorScheme is not used at all, and your ThemeData has ThemeData.useMaterial3 set to false, then Flutter defaults to using obsolete Typography.material2014. In such a case, consider defining your typography manually to Typography.material2018 or why not even Typography.material2021.
  • If you specify a custom typography for FlexColorScheme or FlexThemeData, the useTextTheme property has no impact on used typography at all.

---

For a complete list of ALL changes from 6.1.2 to 7.0.0, see the logs below. There are a shitload of them. But most breaking changes are (minor) style breaking, meaning API still works as before and produces very similar result. This one that you stumbled on is API breaking though, and recorded as such and can give big diff in result.

7.0.0

Apr 2, 2023

This is a major update to the FlexColorScheme package and a substantial leap for the companion app Themes Playground. For a detailed list of all changes, please refer to the incremental log from its development releases linked below.

• Changes from 6.1.2 to 7.0.0-dev.1

• Changes from 7.0.0-dev.1 to 7.0.0-dev.2

• Changes from 7.0.0-dev.2 to 7.0.0-dev.3 (final beta)

[Petri-Oosthuizen]

This is it. Thank you for taking the time to provide such a well-constructed answer.

[rydmike]

No problem, good addition to have in the Q&As.

Btw, version 7.1.1 of Themes Playground includes the updated behavior for how it writes code for the useTextTheme property, so it always adds it when it is not null, to the generated API config code. It should be clearer and easier to discover this change via that as well.