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.
How to fix it
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.
1 2 3 4 5 6 const Text( 'Example text', textHeightBehavior: TextHeightBehavior( leadingDistribution: TextLeadingDistribution.even, ), )