How to set Flutter text line spacing-CodePudding

Is it possible to set the line spacing for Flutter Text or RichText widgets.

I am most specifically not interested in setting the Text() height property as it changes the height of a line and not the spacing between lines. This is most obvious for the first line of text which gets the extra height when setting the height property.

I do not want extra spacing above the first line, nor below the last line. I only want extra spacing between lines.

CodePudding user response：

You can use Text widget > style > TextStyle > height for line height.

  Text(
       "text string",
       style: TextStyle(
            height: 20,
       ), 
    ),

CodePudding user response：

To solve this use TextStyle and set a height and to avoid the problem with the first line, also set textHeightBehavior with applyHeightToFirstAscent to false.

Example:

RichText(
  textHeightBehavior:
      const TextHeightBehavior(applyHeightToFirstAscent: false),
  text: TextSpan(
    style: DefaultTextStyle.of(context).style.copyWith(height: 2.0),
    text: "hello world",
  )

CodePudding user response：

TextHeightBehavior class

TextHeightBehavior.applyHeightToFirstAscent and TextHeightBehavior.applyHeightToLastDescent represent whether the TextStyle.height modifier will be applied to the corresponding metric. By default both properties are true, and TextStyle.height is applied as normal. When set to false, the font's default ascent will be used.

applyHeightToFirstAscent property

Whether to apply the TextStyle.height modifier to the ascent of the first line in the paragraph.

When true, the TextStyle.height modifier will be applied to the ascent of the first line. When false, the font's default ascent will be used and the TextStyle.height will have no effect on the ascent of the first line.

This property only has an effect if a non-null TextStyle.height is specified.

Defaults to true (height modifications applied as normal).

applyHeightToLastDescent property

Whether to apply the TextStyle.height modifier to the descent of the last line in the paragraph.

When true, the TextStyle.height modifier will be applied to the descent of the last line. When false, the font's default descent will be used and the TextStyle.height will have no effect on the descent of the last line.

This property only has an effect if a non-null TextStyle.height is specified.

Defaults to true (height modifications applied as normal).

Text(
    "Text goes here",
    style: TextStyle(
         height: 4,
    ),
    textHeightBehavior: TextHeightBehavior(
         applyHeightToFirstAscent: false,
         applyHeightToLastDescent: false,
         leadingDistribution: TextLeadingDistribution.proportional
     ),
),