How to pass custom Text Styles to FlexColorScheme?

[ghost]

I can not find a way to pass my custom TextStyle in FlexColorScheme. For example, ThemeData has argument textTheme:

textTheme: const TextTheme(
      bodyText1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      bodyText2: TextStyle(
        fontSize: 16.0,
      ),
      headline2: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.w700,
      ),
      headline1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      subtitle2: TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w700,
      ),
      headline6: TextStyle(
        fontSize: 36,
        fontWeight: FontWeight.w700,
      ),
    ),

Could you please let me know how I can add custom text style to Theme?

Thank you.

[rydmike]

Hi @PTLam25 thanks for your question.

Yes it is a bit tricky actually to add custom text theme. Basically you have to do the same steps as when you already have a ThemeData() object and want to create a copy with a new TextTheme by using both copyWith and merge.

For more details please see this issue and details there: #15
It also has a link to a similar more detailed discussion in another issue, here: #14 (comment)

To help out with this frequently asked question (and I want the feature too 😃 ), I am adding and exposing textTheme property in the next release of FlexColorScheme, along with some other new features and themes, I'm actually working on now. The textTheme part is already done, including tests for it, works fine. I have not pushed it or released it yet though.

The feature will make it a lot simpler, since you can then just pass in the from default modified textTheme properties directly, just as you can with ThemeData .

However to do it right now, the link above should help you with some examples. The solution is basically the same hoops you have to go through when you want modify text theme of a ThemeData object that you already have. The only issue with it, is that it is cumbersome and quite tricky to do so in Flutter.

Hope this helps, let me know if you need any more assistance with it.

[rydmike]

with your example textTheme it would look like this

// Light theme with custom text theme
    final ThemeData myLightTheme = FlexColorScheme.light().toTheme().copyWith(textTheme: const TextTheme(
      bodyText1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      bodyText2: TextStyle(
        fontSize: 16.0,
      ),
      headline2: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.w700,
      ),
      headline1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      subtitle2: TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w700,
      ),
      headline6: TextStyle(
        fontSize: 36,
        fontWeight: FontWeight.w700,
      ),
    ),
  ).merge(Typography.material2018(platform: defaultTargetPlatform).black),

[rydmike]

In the next version 4.0.0 you will be able to do this:

// Custom text theme
const TextTheme customText = const TextTheme(
      bodyText1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      bodyText2: TextStyle(
        fontSize: 16.0,
      ),
      headline2: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.w700,
      ),
      headline1: TextStyle(
        fontSize: 16.0,
        fontWeight: FontWeight.w700,
      ),
      subtitle2: TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w700,
      ),
      headline6: TextStyle(
        fontSize: 36,
        fontWeight: FontWeight.w700,
      ),
    );

// Light theme with custom text theme
    final ThemeData myLightTheme= FlexColorScheme.light(
      textTheme: customText,
     ).toTheme;

// Also a new syntax via an extension available, you can you use e.g. 
// FlexThemeData.dark and don't need to do a .toTheme from the FlexColorScheme.dark
    final ThemeData myDarkTheme= FlexThemeData.dark(
      textTheme: customText,
    );

Should be much simpler and nicer to use.

[ghost]

@rydmike thank you very much for your detailed explanation.