Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Line height issue with Figma Tokens #24

Open
abhi259 opened this issue Feb 27, 2024 · 1 comment
Open

[BUG] Line height issue with Figma Tokens #24

abhi259 opened this issue Feb 27, 2024 · 1 comment

Comments

@abhi259
Copy link

abhi259 commented Feb 27, 2024

ℹ️ Info

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

💬 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
Copy link
Author

abhi259 commented Feb 27, 2024

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);
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant