👻

Flutter StrutStyleで日本語と英語のTextの高さを揃える

2020/12/17に公開

Flutterで、日本語を含むTextと、アルファベットのみのTextで高さが異なることがあります。一つのTextに日本語とアルファベットが混在している場合は問題ないのですが、別のWidgetになっていて、並んでいる場合などは差が目立ってしまい違和感があります。

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),
      ),
    ),
  ],
)

上記のコードだと、以下のように "ABC" と "あいう" の高さが違います。

※同じ fontSize を指定しているのに……。

StrutStyle

いまのリリースバージョンである Flutter v1.2.1 では StrutStyle というオプションがあり、これで高さをコントロールできます。StrutStyleはTextの行の最低限の高さを設定できるためです。

次のように設定してみました。

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,
        ),
      ),
    ),
  ],
)

手元の環境だと、height 1.3 以上にすると、高さが揃いました。つまり、この環境では日本語の文字の高さは、アルファベットの約1.3倍の高さということですね。

StrutStyle は TextStyle とは独立しているので、TextStyleでは小さい文字 fontSize: 12.0 にしつつ、行のレイアウトの計算では大きい文字として扱う（StrutStyleで fontSize: 16.0 にするなど）ということができます。

テキスト関連の調整がやりやすくなりましたね！

この記事はQiitaの記事をエクスポートしたものです

StrutStyle

Discussion