mark-nicepants / figma2flutter

Converts design token json files to flutter
Apache License 2.0
17 stars 16 forks source link

[BUG] Line height issue with Figma Tokens #24

Open abhi259 opened 4 months ago

abhi259 commented 4 months ago

:information_source: Info

Flutter Version: v3.16.5 Package Version : 0.2.0-alpha

:speech_balloon: Line height issue with Figma Tokens.

This is a example of a textstyle token generated
TextStyle get m3BodyLarge => const TextStyle( fontFamily: 'Roboto', fontSize: 16.0, fontWeight: FontWeight.w400, height: 24.0, letterSpacing: 0.5, );

Here because of the way the height in flutter for textStyle works is like (height x fontSize). Because of this issue each line's height becomes very big making textStyle tokens unusable, while the similar token works for web because there its height is in pixels but with flutter its different, here is directly multiplies with the fontSize.

Please fix this if possible Thank You

abhi259 commented 4 months ago

for now I have made a extension to fix this issue on my side like this.

extension NewStyle on TextStyle {
  TextStyle fixLineHeight(BuildContext context) {
    double pixelFontSize = fontSize!;
    double pixelLineHeight = height!;

    double pixelRatio = MediaQuery.of(context).devicePixelRatio;
    double logicalFontSize = pixelFontSize / pixelRatio;
    double logicalLineHeight = pixelLineHeight / pixelRatio;
    return copyWith(height: logicalLineHeight / logicalFontSize);
  }
}