Correct way to set a custom TextTheme?

[superakabo]

I'd like to know the current way of adding a text theme.
Is it by doing for example,

  FlexThemeData.light(
      textTheme: GoogleFonts.interTextTheme(),
      primaryTextTheme: GoogleFonts.interTextTheme(),
  );

or

 FlexThemeData.light(
     typography: Typography.material2021(
        platform: Theme.of(context).platform,
        white: GoogleFonts.interTextTheme(),
        black: GoogleFonts.interTextTheme(),
      ),
    );

[rydmike]

I use and recommend the first version.

When you use the 1st version you can get the optional color blended theming also on your provided custom text themes, that FCS component themes can apply if you want it. With 2nd version that would not be applied. (Or so I think, I have actually never tried the 2nd way)

A similar situation also applies to ThemeData, it is better to not mixing in the custom TextTheme into the Typography. The ThemeData factory does config on passed in textTheme too (FCS replicates it, plus some extras if opted in on them) that might break if you set it via typography property. Although I must admit, I have as mentioned never tested doing it that way.

By default when you in FCS opt-in on Material3 you get 2021 Typography, else M2 2018. You can set it to e.g. 2021 for both modes like this, if you like:

 FlexThemeData.light(
   textTheme: GoogleFonts.interTextTheme(),
   primaryTextTheme: GoogleFonts.interTextTheme(),
   typography: Typography.material2021(
     platform: defaultTargetPlatform,
   ),
 );

To use defaultTargetPlatform you need to import 'package:flutter/foundation.dart'.

By using defaultTargetPlatform in Typography you will be able to fully define your app's root ThemeData, as just data with no knowledge of the context, thus even before you have a context. I recommend this too. It is often useful in order to get clean switching animations/transitions between different ThemeData and is very practical to be able to define your ThemeData before you have a context.

All the FCS examples, even example 5, the Themes Playground, use ThemeData that does not need any context info. Just simple functions, that take a controller that holds all used FlexThemeData property values (modified via UI), and just returns new ThemeData based on the controller values, that is consumed by the MaterialApp, very simple 😄

[superakabo]

Understood. Thank you.