How to align your Figma design texts pixel-perfect in Flutter

You’re implementing a component designed in Figma, trying to align everything perfectly but even though every margin, padding, and alignment seems to match those in Figma something is still off. This can be caused by differences in how Figma and Flutter distribute text line-height property.

Text height problem

Designers working on typography have a number of parameters to emphasize the application character. One is line-height - the vertical distance between two lines of text. When the line height is bigger than the font size, empty space is added but how it’s distributed can differ between Figma and Flutter.

Figma Flutter

How to fix it

The Flutter Text widget has a property called textHeightBehavior. It accepts a TextHeightBehavior class with a leadingDistribution parameter that defaults to TextLeadingBehaviour.proportional. Changing it to TextLeadingDistribution.even may be the solution for you.

const Text(
  'Example text',
  textHeightBehavior: TextHeightBehavior(
    leadingDistribution: TextLeadingDistribution.even,
  ),
)