How are fonts rendered in Flutter or how do I avoid vertical spacing?

Question

I have two simple Text-Widgets in a Row that have different font sizes. I use CrossAxisAlignment.start to vertically place them at the beginning of the vertical axis. Unfortunately, the two text chunks are not correctly aligned. When I use Flutter: Inspect Widget in VSCode, I can see that both Text-Widgets have some vertical spacing to the top of the row, which increases with font size. This reminds me of the line-height attribute in CSS, but I have not found an equivalent in Flutter.

Is there any way to render a Text-Widget's content without this spacing?

To reproduce this behavior, use the following Row inside the Flutter Create demo App:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('First', style: TextStyle(fontSize: 50),),
    Text('Second', style: TextStyle(fontSize: 20)),
  ],
),

Have you tried the TextStyle "height" property? default is 1 — Tiziano Munegato, Feb 10 '19 at 22:43
@TizianoMunegato , thanks for the response. I was able to use the `height` property and with double values like `0.8` or `0.9` I have been able to accomplish what I wanted, thanks! — Niels Vocke, Feb 12 '19 at 13:13
@NielsVocke did you find other solution instead of using the height property with these random values like `0.8` or `0.9`? — Ionel Lupu, Aug 27 '19 at 13:30

score 0 · Answer 1 · answered May 11 '20 at 20:37

0

1.0 is a percentage of the font-size I think. Maybe 18%?

https://api.flutter.dev/flutter/painting/TextStyle/height.html

answered May 11 '20 at 20:37

Clive Portman

111
3

How are fonts rendered in Flutter or how do I avoid vertical spacing?

1 Answers1