What is the StrutStyle in the Flutter Text widget

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.

The ascent is the distance from the baseline to the top of the text (as defined by the font, not any particular glyph)
The decent is the distance from the baseline to the bottom of the text (as defined by the font, not any particular glyph)
The leading (pronounced "ledding", as in the the lead metal that the old typesetters used to use between lines of type) is the distance between the bottom of one line and the top of the next. In the strut, half of the leading is put on top and half one bottom. The is the gray area in the illustration.

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.

Recommended topics

Hot tags