Controlling text height using StrutStyle

In Flutter, line height of Text is different between Japanese characters and alphabets.

Row(
  children: <Widget>[
    Container(
      color: Colors.green,
      child: const Text(
        "ABC",
        style: TextStyle(fontSize: 16.0),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Text(
        "あいう",
        style: TextStyle(fontSize: 16.0),
      ),
    ),
  ],
)

Both Text widgets have the same fontSize.

StrutStyle

Now, Flutter v1.2.1 provides StrutStyle for texts. Strut is a feature that allows minimum line heights to be set.

StrutStyle class - dart:ui library - Dart API

Lets set StrutStyle:

Row(
  children: <Widget>[
    Container(
      color: Colors.green,
      child: const Text(
        "ABC",
        style: TextStyle(fontSize: 16.0),
        strutStyle: StrutStyle(
          fontSize: 16.0,
          height: 1.3,
        ),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Text(
        "あいう",
        style: TextStyle(fontSize: 16.0),
        strutStyle: StrutStyle(
          fontSize: 16.0,
          height: 1.3,
        ),
      ),
    ),
  ],
)

Same heights!

In my development environment, When the fontSize of StrutStyle is 1.3, the heights of the Texts are the same. This means that Japanese characters are 1.3 times higher than the alphabet.

StrutStyle is independent from any text content or TextStyle. This allows you to, for example, have the layout be treated as large characters, while keeping the actual characters small.

It is a very valuable feature in environments with mixed language characters, such as Japanese.

Thanks Flutter!