About listTileSubtitleTextStyle size error problem

[maxfrees]

static final ThemeData _lightTheme = FlexThemeData.light(
    useMaterial3: true,
    scheme: scheme,
    surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
    lightIsWhite: true,
    visualDensity: VisualDensity.comfortable,
    subThemesData: _widgetTheme.copyWith(
      blendOnLevel: 10,
      blendOnColors: false,
      // App Bar
      appBarBackgroundSchemeColor: SchemeColor.primary,
      // Tab Bar
      tabBarItemSchemeColor: SchemeColor.onPrimary,
      tabBarUnselectedItemSchemeColor: SchemeColor.outlineVariant,
      listTileSubtitleTextStyle: TextStyle(fontSize: 14),
    ),
  );

1. Why do I set up the size, it should be 20, why is now 19, I if you remove listTileSubtitleTextStyle is normal
2. I want to in listTileSubtitleTextStyle TextStyle font Settings for the Theme, of (context). ColorScheme. OutlineVariant, I should how to implement, Can only be set to a fixed color?

@rydmike

[rydmike]

Hi @maxfrees, thanks for the question. It is an interesting one 😄

You will need to extract the resulting ColorScheme from your FlexColorScheme and use colors from it to define the listTileSubtitleTextStyle and its TextStyle color.

For the correct (same as default) font spacing and height, you will also need to replicate the exact default TextStyle of bodyMedium that ListTile uses for its subtitle. The default Material3 bodyMedium has a lot of other props in its TextStyle set as well, not just font size 14, more about that later.

Here is the basic idea:

abstract final class AppTheme {
  // The defined light theme.
  static ThemeData get light {
    // Make a FlexColorScheme data object, without creating a theme or
    // ColorScheme from it. This is done to be able to extract the ColorScheme
    // from it, to then use it in the custom subThemesData for ListTile, or
    // other places where we want to use the created ColorScheme colors, like
    // even totally custom component theme overrides on the resulting ThemeData.
    final FlexColorScheme fcsData = FlexColorScheme.light(
      scheme: FlexScheme.flutterDash,
      surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
      lightIsWhite: true,
      visualDensity: VisualDensity.comfortable,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 10,
        blendOnColors: false,
        // App Bar
        appBarBackgroundSchemeColor: SchemeColor.primary,
        // Tab Bar
        tabBarItemSchemeColor: SchemeColor.onPrimary,
        tabBarUnselectedItemSchemeColor: SchemeColor.outlineVariant,
      ),
    );

    // Extract the ColorScheme from FlexColorScheme.
    final ColorScheme colorScheme = fcsData.toScheme;

    // Return ThemeData with custom subThemesData for ListTile, where its
    // listTileSubtitleTextStyle is modified to use the
    // colorScheme outlineColor. This is just an example of how to use the
    // extracted colorScheme to create a custom style for the ListTile
    // subtitle text style.
    return fcsData
        .copyWith(
          subThemesData: fcsData.subThemesData!.copyWith(
            listTileSubtitleTextStyle: TextStyle(
                color: colorScheme.outlineVariant,
                fontSize: 14.0,
                fontWeight: FontWeight.w400,
                letterSpacing: 0.25,
                height: 1.43,
                textBaseline: TextBaseline.alphabetic,
                leadingDistribution: TextLeadingDistribution.even),
          ),
        )
        .toTheme;
  }

To match the default M3 style we have to match the default M3 style for the ListTile subtitle text style. The correct one depends on your locale and is difficult to recreate universally, since different locales have different default styles.

In Flutter the default TextStyle sizes, heights and letter spacing are not not set by the ThemeData created by FlexColorScheme, nor even by ThemeData creation in Flutter SDK. They are set by the localization step in MaterialApp after the ThemeData creation process.

The default sizes are thus not available until the context after the MaterialApp has been built and created. In the example above I was assuming that we are using a locale that results in the "EnglishLike" TextTheme and its TextStyles to be created, to match the observed hight of 20dp that you were asking for, but did not see when you set only font size to 14dp.

If you are using another custom font and not the default, you would need to put that into TextStyle as well.

All this TextTheme default size, hight etc magic is defined in Flutter's Typography class, where I sniped the sizes to match the default for M3 and english like languages. But the sizes are different for M2 and also for dense Typography (used by Chinese, Japanese and Korean) or tall Typography (used by Farsi, Hindi, and Thai).

Below is a screenshot of the Flutter SDK code behind this from the Typography class for M3. M2 is different, and there is even 2014 version of it available used in Flutter M2 by default, which is even wrong M2 spec, for the correct M2 spec the 2018 version should be used, the 2021 version is the M3 spec.

---

If you want to use Theme.of(context).textTheme and modify them with a copyWith for custom versions of its TextStyle's that is aware of the effective sizes and locale, you will have to create an extra widget level in your app that wraps all the routes in your app with a new Theme, modifying the resulting Theme.of(context) from MaterialApp, before any other routes in your app uses it, basically an extra theme wrapper/modifier layer.

If you have and use only one Typography style that you know it will be, well then you can do what I did above to match the default. Of course your style does not have to be the default exactly either, you can make your own style, with custom height and letter spacing too.

Fonts and Typography in Flutter are quite complicated.

---

PS. In your example you set useMaterial3: true,. You do not have to do that if you are using V8 or later, it is true by default in V8. In V7 and earlier it was false by default, but in V8 it moved to follow the Flutter default.

---

Converting this issue to a discussion. It is yet another good example of using more advanced features in FlexColorScheme, to first extract the ColorScheme and use it for further modifications. Others might find it useful as well.