TextStyle Extension

[smallTrogdor]

Define Extensions on TextStyle to add some syntactic sugaring for using TextStyles.

extension SBBTextStyleExtensions on TextStyle {

  TextStyle get extraLight => copyWith(fontWeight: FontWeight.w100);
  TextStyle get light => copyWith(fontWeight: FontWeight.w300);
  TextStyle get normal => copyWith(fontWeight: FontWeight.w300);
  TextStyle get roman => copyWith(fontWeight: FontWeight.w400);
  TextStyle get semiBold => copyWith(fontWeight: FontWeight.w500);
  TextStyle get bold => copyWith(fontWeight: FontWeight.w600);
  TextStyle get extraBold => copyWith(fontWeight: FontWeight.w700);
  TextStyle get black => copyWith(fontWeight: FontWeight.w800);

  TextStyle get xxLarge => copyWith(fontSize: SBBTextStyles.xxLargeFontSize, height: SBBTextStyles.xxLargeFontHeight);
  TextStyle get xLarge => copyWith(fontSize: SBBTextStyles.xLargeFontSize, height: SBBTextStyles.xLargeFontHeight);
  TextStyle get large => copyWith(fontSize: SBBTextStyles.largeFontSize, height: SBBTextStyles.largeFontHeight);
  TextStyle get medium => copyWith(fontSize: SBBTextStyles.mediumFontSize, height: SBBTextStyles.mediumFontHeight);
  TextStyle get small => copyWith(fontSize: SBBTextStyles.smallFontSize, height: SBBTextStyles.smallFontHeight);
  TextStyle get xSmall => copyWith(fontSize: SBBTextStyles.xSmallFontSize, height: SBBTextStyles.xSmallFontHeight);

  TextStyle get italic => copyWith(fontStyle: FontStyle.italic);
  TextStyle get regular => copyWith(fontStyle: FontStyle.normal);
  
}

For usage like sbbTextStyle.roman.large.

Idea came from @VanHoangTran.

[smallTrogdor]

What do you think @rawi-coding, @mosberger and @Grodien ?

[rawi-coding]

Looks good to me! 🎉

[VanHoangTran]

While working on this I noticed an unexpected behaviour when adjusting the font weights.

The SBB font is defined as follows in pubspec.yaml:

flutter:
  fonts:
    - family: SBBWeb
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Bold.ttf
          weight: 700
        - asset: packages/design_system_flutter/fonts/SBBWeb-Roman.ttf
          weight: 400
        - asset: packages/design_system_flutter/fonts/SBBWeb-Italic.ttf
          weight: 400
          style: italic
        - asset: packages/design_system_flutter/fonts/SBBWeb-Light.ttf
          weight: 300
        - asset: packages/design_system_flutter/fonts/SBBWeb-Thin.ttf
          weight: 200
        - asset: packages/design_system_flutter/fonts/SBBWeb-Ultra-Light.ttf
          weight: 100

By trying out I found the effectively used configuration when using the SBB font with the different font weights.
I still don't fully understand why it behaves like that, especially since SBBWebThin just seems to be ignored.
The results are shown in the following image (left = font weight; right = font family):

Since basically everybody is only using SBBWebLight without ever changing the font weight, this wasn't a problem yet but using italic style shows that the current implementation is not reliable as shown in the following image.
Left column: SBBWebFont (current implementation), using font weight from 100 to 900 (incrementing by 100 per line)
Right column: Every line uses a font weight of 400. Font family changes per line as per following list:SBBWebUltraLight, SBBWebThin, SBBWebLight, SBBWebRoman, SBBWebBold, SBBWebCondensedBold, SBBWebCondensedHeavy

[VanHoangTran]

Based on these results I suggest defining separate font families without weight values in pubspec.yaml:

flutter:
  fonts:
    - family: SBBWebUltraLight
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-UltraLight.ttf
    - family: SBBWebThin
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Thin.ttf
    - family: SBBWebLight
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Light.ttf
    - family: SBBWebRoman
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Roman.ttf
    - family: SBBWebBold
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Bold.ttf
    - family: SBBWebCondensedBold
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Condensed-Bold.ttf
    - family: SBBWebCondensedHeavy
      fonts:
        - asset: packages/design_system_flutter/fonts/SBBWeb-Condensed-Heavy.ttf

and adapting my initial suggestion as follows:

const TextStyle sbbTextStyle = SBBTextStyles.mediumLight;

extension SBBTextStylesExtensions on TextStyle {

  TextStyle get ultraLight => copyWith(fontFamily: 'SBBWebUltraLight');
  TextStyle get thin => copyWith(fontFamily: 'SBBWebThin');
  TextStyle get light => copyWith(fontFamily: 'SBBWebLight');
  TextStyle get roman => copyWith(fontFamily: 'SBBWebRoman');
  TextStyle get bold => copyWith(fontFamily: 'SBBWebBold');
  TextStyle get condensedBold => copyWith(fontFamily: 'SBBWebCondensedBold');
  TextStyle get condensedHeavy => copyWith(fontFamily: 'SBBWebCondensedHeavy');

  TextStyle get xxLarge => copyWith(fontSize: SBBTextStyles.xxLargeFontSize, height: SBBTextStyles.xxLargeFontHeight);
  TextStyle get xLarge => copyWith(fontSize: SBBTextStyles.xLargeFontSize, height: SBBTextStyles.xLargeFontHeight);
  TextStyle get large => copyWith(fontSize: SBBTextStyles.largeFontSize, height: SBBTextStyles.largeFontHeight);
  TextStyle get medium => copyWith(fontSize: SBBTextStyles.mediumFontSize, height: SBBTextStyles.mediumFontHeight);
  TextStyle get small => copyWith(fontSize: SBBTextStyles.smallFontSize, height: SBBTextStyles.smallFontHeight);
  TextStyle get xSmall => copyWith(fontSize: SBBTextStyles.xSmallFontSize, height: SBBTextStyles.xSmallFontHeight);

  TextStyle get italic => copyWith(fontStyle: FontStyle.italic);
  TextStyle get normal => copyWith(fontStyle: FontStyle.normal);

}

With this the dev will still be able to use sbbTextStyle.roman.large but instead of changing the weight value resulting in a potentially unexpected outcome, the font family will be changed to get the desired result.

[VanHoangTran]

Found an open issue about this:
flutter/website#3591 (comment)

[smallTrogdor]

For the naming I would suggest to suffix the fontFamily extensions with the word style or family.
E.g.

extension SBBTextStylesExtensions on TextStyle {

  TextStyle get ultraLightStyle => copyWith(fontFamily: 'SBBWebUltraLight');
  TextStyle get thinStyle => copyWith(fontFamily: 'SBBWebThin');
  TextStyle get lightStyle => copyWith(fontFamily: 'SBBWebLight');
  TextStyle get romanStyle => copyWith(fontFamily: 'SBBWebRoman');
  TextStyle get boldStyle => copyWith(fontFamily: 'SBBWebBold');
  TextStyle get condensedBoldStyle => copyWith(fontFamily: 'SBBWebCondensedBold');
  TextStyle get condensedHeavyStyle => copyWith(fontFamily: 'SBBWebCondensedHeavy');

  TextStyle get xxLarge => copyWith(fontSize: SBBTextStyles.xxLargeFontSize, height: SBBTextStyles.xxLargeFontHeight);
  // ...
}

I guess flutter/website#3591 (comment) explains why we're seeing this behavior and clearly shows the need of going towards the fontFamily usage.

[rawi-coding]

@smallTrogdor Sounds good to me 👍 I would prefer style over family

[smallTrogdor]

Thanks for all the work @VanHoangTran ! Will you get to implementing it over the next days? Otherwise I can invest some time next week 🤗

[VanHoangTran]

No I can do that 😉