Flutter - Using StrutStyle Widget Examples

This tutorial shows you how to adjust line height in Flutter using StrutStyle.

By default, Flutter compute the height of a line based on the text inside. That means different font size and different font family may result in different line height. What if your application can use various font families but you want to preserve the same line height. The solution is by using StrutStyle widget.

StrutStyle is a widget that can control the line height by calculating what is the line weight supposed to be given the font size, font family, font style, etc. By applying StrutStyle across texts with different styles, you can make a standardized line height.

First, let's take a look at an example where there are different styles in a row without using StrutStyle. The below example only uses different font families. To make it easy, the background color of the text containers should be contrast to their surroundings.

  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        color: Colors.lightGreen,
        child: const Text(
          'ABCDE',
          style: const TextStyle(
            fontSize: 40.0,
            fontFamily: 'Raleway',
          ),
      ),
      Container(
        color: Colors.lightGreen,
        child: const Text(
          'ABCDE',
          style: const TextStyle(
            fontSize: 40.0,
            fontFamily: 'OpenSans',
        ),
      ),
    ],
  )

Output:

As you can see, the line height is different, with the right text has taller height compared to the left. This problem can be solved using StrutStyle widget.

Code Examples

To have a standardized line height, now we apply the same StrutStyle to both Text widgets.

We define a new StrutStyle

  static const StrutStyle _strutStyle = const StrutStyle(
    fontSize: 40.0,
  );

Use the above variable as strutStyle property in the constructor.

  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        color: Colors.lightGreen,
        child: const Text(
          'ABCDE',
          style: const TextStyle(
            fontSize: 40.0,
            fontFamily: 'Raleway',
          ),
          strutStyle: _strutStyle,
        ),
      ),
      Container(
        color: Colors.lightGreen,
        child: const Text(
          'ABCDE',
          style: const TextStyle(
            fontSize: 40.0,
            fontFamily: 'OpenSans',
          ),
          strutStyle: _strutStyle,
        ),
      ),
    ],
  )

Output:

Why it doesn't work. Flutter use the following order to determine which font family to be used for calculating the line height.

1. fontFamily property (String).
2. Order in fontFamilyFallback property (List<String>)
3. System default font.

First, it will check if fontFamily is passed and valid. If not, Flutter will use the fonts defined in fontFamilyFallback based on the element order. If both properties can't provide a valid font, it will use the system default font which is Roboto.

The height of Raleway is similar to Roboto, but OpenSans has taller line height. Therefore the result still shows different heights since StrutStype by default only sets the minimum height.

By passing OpenSans as fontFamily, now it calculates what is the supposed line height if the font is OpenSans with a size of 40.

  static const StrutStyle _strutStyle = const StrutStyle(
    fontSize: 40.0,
    fontFamily: 'OpenSans',
  );

Output:

Not only font size and font family, other things such as weight and style may also affect the line height. So you may also need to define them if the text can have styling. Read the list of available properties on the bottom of this tutorial.

What happens if the calculated line height is shorter than the actual font height? As StrutStyle only sets the minimum height by default, the original height will be used instead of the StrutStyle's. To force the line height to use the one calculated by StrutStyle, pass forceStrutHeight property with true as the value.

  static const StrutStyle _strutStyle = const StrutStyle(
    fontSize: 20.0,
    fontFamily: 'OpenSans',
    forceStrutHeight: true,
  );

Output:

StrutStyle Properties

Below are the available properties you can pass in the constructor.

• String fontFamily: >Name of the font used for calculating the strut.
• List<String> fontFamilyFallback: Fallback used in order if fontFamily cannot provide a valid font family.
• double fontSize: The font size used for calculating the strut.
• double height: The multiple of fontSize to multiply the ascent (distance above the baseline) and descent (distance below the baseline). fontSize is ascent + descent.
• FontWeight fontWeight: The type thickness (e.g., bold to use for calculating the strut). be applied as a multiple o fontSize
• FontStyle fontStyle: The typeface variant (e.g., italics) to use for calculating the strut.
• double leading: The custom leading (additional spacing between lines) to be applied as a multiple of fontSize.
• bool forceStrutHeight: Whether the strut height should be forced.
• String debugLabel: A human-readable description of this strut style, only used in debug builds.
• String package: Used as prefix if the font is provided in a pacage.