What is the StrutStyle
in the Flutter Text
widget? I've read this documentation but I'm having trouble understanding the meaning, especially the height
, leading
, and fontSize
parameters.
You can think of the StrutStyle
as the minimum line height for text in a Text
widget. The documentation is a good place to start.
Here is an image to help visualize it:
The colored rectangle on the left is the strut (although in actuality a strut has no width). The height of that rectangle is the minimum line height. The line can't be any shorter than that. But it can be taller.
You can change the vertical size of the strut by using a multiplier.
In the StrutStyle
class, the height
parameter is the multiplier for the ascent and the descent. In the illustration the height is approximately 1.7, making the green ascent and the pink descent proportionally larger than in the original image. The leading height multiplier can be controlled separately. You use the leading
parameter to set it. I used the same multiplier as for the ascent and descent, though. The baseline stays the same.
const Text(
'My text', // use 'My text \nMy text' to see multiple lines
style: TextStyle(
fontSize: 10,
fontFamily: 'Roboto',
),
strutStyle: StrutStyle(
fontFamily: 'Roboto',
fontSize: 14,
height: 1.7,
leading: 1.7,
),
),
Other settings like fontFamily
and fontSize
just define what the font metrics are to use the height multipliers on. Also note that the TextStyle
does not have to be the same as the StrutStyle
.
The idea of a strut comes from CSS, which got it from TeX.
See also